¿Cómo puedo hacer que una lista de pares de nombre-valor aparezca como una tabla HTML?

Question

He heredado un informe de formularios web diseñado utilizando controles de servidor HTML y ASP.NET puros, y un patrón de diseño común es una sección diseñada con una tabla de cuatro columnas, con primera y tercera columnas para etiquetas de campo y la segunda y cuarta columnas para valores.

Como me han encomendado la tarea de 'recapado' del informe, pensé en intentar mejorar la semántica del marcado y eliminar todas las tablas que no se usan para los datos tabulares reales. Después de algunos experimentos con listas de definición para los pares de nombre-valor, Me instalados en cambio en un ol/li combinación, pero no puedo encontrar la manera de obtener los dos elementos de texto dentro de cada li para ocupar el 50% de la anchura de todo el elemento li.

Ésta es css para la lista:

ol.name-value 
{ 
    list-style: none; 
    display: table; 
} 

ol.name-value li { 
    display: table-row; 
    border-bottom: 1px solid #E8E8E8; 
} 

Este es el código HTML:

<div class="span-12"> 
    <ol class="name-value" style="width: 100%;"> 
     <li>      
      <label for="about">Client</label> 
      <span id="about">Apartment Applied Visual Arts</span> 
     </li> 
     <li> 
      <label for="about">Report Date</label> 
      <span id="Span1">2011/08/08 16:50:10</span> 
     </li> 
     <li> 
      <label for="about">Report No.</label> 
      <span id="Span2">33251</span> 
     </li> 
    </ol> 
</div> 

Y esto es lo que me pasa como resultado. La sección Detalles del informe es una tabla de dos columnas, donde los Detalles del informe son la lista ordenada anterior. Estoy tratando de obtener la lista

Answer 1

Prueba esto:

ol.name-value { 
    list-style: none; 
    display: table; 
} 

ol.name-value li { 
    display: table-row; 
    border-bottom: 1px solid #E8E8E8; 
} 

ol.name-value li label { 
    display: table-cell; 
    width: 50%; 
} 

ol.name-value li span { 
    display: table-cell; 
    width: 50%; 
}