Estilo dl y dt con CSS para imitar la presentación en forma de tabla

Tengo los siguientes problemas al usar CSS para dar estilo a algunos elementos dl y dt. Prefiero siempre usar CSS muy básico que sea compatible con IE6/IE7 y navegadores modernos. Estoy tratando de obtener un efecto, que para mí debería ser bastante simple de lograr.Estilo dl y dt con CSS para imitar la presentación en forma de tabla

Aquí es una versión simplificada del código fuente inicial estoy trabajando con, al tratar de trabajar en un solo tema:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 

     <style type="text/css"> 

     .terms dl { 
      float: left; 
      padding-left: 0px; 
     } 

     .terms dt, .terms dd { 
      text-align: center; 
      margin: 0px; 
      float: left; 
     } 

     .terms dt { 

      border: solid blue 1px; 
      clear: left;  
     } 

     .terms dd { 
      border: solid red 1px; 
      margin-right: 40px; 
      margin-left: 40px; 
     } 

     </style> 
    </head> 
    <body> 
     <div class="terms"> 
      <h1>Terms</h1> 
      <dl> 
       <dt>Term 1:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 2:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 3 with longer term title:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 4:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 5:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 6:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
      <dl> 
       <dt>Term 7:</dt> 
       <dd>Defintion for term</dd> 

       <dt>Term 8:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 9:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 10:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 11:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 12:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
     </div> 
    </body> 
</html>

Aquí es el resultado visual. Me LABRÓ bordes azules y rojos para que quede más fácilmente visualizado:

enter image description here

Mi objetivo es tener todas las "cajas" azul y rojo para tener el mismo ancho no importa lo que el conjunto de texto de tamaño es . P.ej. si un usuario tiene una hoja de estilo predeterminada para que su texto sea muy grande, debería expandirse en consecuencia. Este problema no solo surge cuando las personas usan su propia hoja de estilo, sino que también surge en IE6 cuando las personas seleccionan "tamaño de texto" que no sea "medio": hace que el texto sea más grande, y quiero poder acomodar eso.

No creo que tenga que establecer un ancho duro en ninguna de las "casillas", y no quiero ningún ajuste de texto, o que las carrozas caigan, fuera de este estilo de dos columnas .

puedo editar la respuesta con más imágenes y ejemplos, si yo no era lo suficientemente claro.

Además, esta es una pregunta relacionada, pero por separado. Si la ventana del navegador se vuelve a clasificar según el tamaño, con una tabla usted esperaría que una porción de la tabla sea no más visible mientras que disminuye la anchura. Con esta configuración, obtienes un resultado muy extraño y feo como se ve a continuación. ¿Cómo puede esto ser evitado?

enter image description here

ACTUALIZACIÓN

parece que no es una solución que no implique dar de ancho fijo a los elementos (y/o un elemento de encapsulación). Además, parece que el redimensionamiento de texto IE6 solo puede resolverse ajustando el texto a un tamaño de píxel y simplemente no dejándoles cambiar el tamaño.

Fuente

2012-03-08 user17753

¿Por qué no usas una mesa? – zgood

Finalidades semánticas, el marcado representa una lista de términos y definiciones; no datos tabulares. Quiero separar la semántica del marcado del estilo. Que yo sepa, ese es el propósito del elemento 'dl' y de CSS. – user17753

Las tablas no son inherentemente malvadas, deben evitarse a toda costa. Son buenos para mostrar, datos tabulares sorpresa, y parece que se aplicaría en este caso. – chris

usted podría especificar el ancho fijo: XXpx para cada uno de los elementos como esto

http://jsfiddle.net/XKaKT/1/

Fuente

2012-03-08 15:19:19 Evert

Lo tomo, no hay forma de hacerlo sin anchos fijos? – user17753

cualquier ancho variable significaría que sus columnas ya no se alinearían verticalmente, ya que podrían estirarse individualmente, pero podría usar anchos de porcentaje como este si eso lo hace más útil: http://jsfiddle.net/XKaKT/2/ – Evert

Por la ventana de cambio de tamaño problema sólo tiene que añadir un ancho a la ".Términos" div:

.terms{ 
    width:1000px; 
}

Fuente

2012-03-08 15:09:27 zgood

Lo tomo, no hay forma de hacerlo sin anchos fijos? – user17753

una lista DL y una tabla de dos columnas en marcha adecuadamente marcada son en realidad bastante equivalente a la semántica. Así que usted puede utilizar con seguridad las tablas aquí (nota los TH elementos con los scope atributos):

<table> <tr> <th scope="row">Term 1:</th> <td>Very Long definition for this term here<td> </tr> <tr> <th scope="row">Term 2:</th> <td>Definition for term<td> </tr> <tr> <th scope="row">Term 3 with longer term title:</th> <td>Definition for term<td> </tr>  </table>

Si se utiliza DL se prefiere, considere el uso de una lista desordenada con cada elemento que contiene una separate DL con exactamente un DT/DD grupo adentro.

Fuente

2012-03-08 16:33:48

tenido un problema similar y he aquí una solución, pero depende en gran medida de cada par DT-DD accesorio en sólo 1 línea, por lo que puede frágil para sus propósitos:

La estrategia general que aquí se desea que el DL ser un bloque en línea y los DT son bloques para que automáticamente tengan el mismo ancho. Esto también le permite alinear correctamente todos los DT si eso se adapta a su estilo, y usted controla el espacio entre los elementos del DT.

dl { 
    line-height: 2; 
    display: inline-block; 
    position: relative; 
} 

dt { 
    text-align: right; 
    margin-right: 1em; 
}

Ahora tiene que posicionar los DD a la derecha de los DT, que es lo que hace que este frágil, debido a que el DD no puede adaptarse bien a un contenido variable.

dd { 
    position: absolute; 
    left: 100%; 
    margin-top: -2em; /* negate the DL line-height */ 
    white-space: nowrap; /* without this, DDs will be the same length as DTs 
}

Tenga en cuenta que establecer restricciones de ancho en el DL controlará sus DT, y sus DD se dimensionarán en función de sus DT.

Fuente

2012-06-13 23:13:44

Estilo dl y dt con CSS para imitar la presentación en forma de tabla

Respuesta

Cuestiones relacionadas