Hacer que los DIV actúen como una tabla usando CSS

Muy bien, al diseñar un sitio, me encontré con un pensamiento ... Tengo algunas partes de mi sitio que serían más adecuadas para actuar como tabla, pero no son datos tabulares . Por alguna razón, realmente me molesta usar una tabla para algo que no es una tabla. Entonces noté las opciones de visualización de CSS, pero no puedo hacerlo funcionar bien. Esto es lo que estoy intentando. ¿Cual es el problema?Hacer que los DIV actúen como una tabla usando CSS

<div class="table"> 
    <div class="tr"> 
    <div class="td">Row 1, Cell 1</div> 
    <div class="td">Row 1, Cell 2</div> 
    <div class="td">Row 1, Cell 3</div> 
    </div> 
    <div class="tr"> 
    <div class="td">Row 2, Cell 1</div> 
    <div class="td">Row 2, Cell 2</div> 
    <div class="td">Row 2, Cell 3</div> 
    </div> 
</div>

Así es como se ve el CSS.

div.table {border: 1px solid black; display: table; } 
div.tr {border: 1px solid black; display: table-row; } 
div.td {border: 1px solid black; display: table-cell; }

Me gustaría que la página a parecerse a una mesa fue utilizado, pero las 'células' todos ir en una nueva línea. ¿Alguna idea?

Fuente

2010-11-23 Yoshiyahu

funciona muy bien en Firefox 3.6.12. ¿Qué navegador estás usando? –

me parece información de tabla.Por favor, no reinvente la rueda con los nombres de las clases div y css que reflejan el marcado de la tabla – redsquare

@ redsquare. Reinventar la rueda es mi especialidad. – Yoshiyahu

Extraño: Lo que citas se ve bien, y debería funcionar. ¿Estás seguro de que no hay una anulación de display: block !important en algún lado?

Pero como mi opinión, voy a decir que por el amor de Dios, simplemente use una mesa. :)

En serio. El argumento principal para no usar tablas en tales situaciones es que no son el elemento correcto semánticamente. Pero al analizar esa sopa div, debes admitir que <table> es la construcción más preferible, incluso si no es exactamente datos tabulares que estás visualizando.

Fuente

2010-11-23 23:25:53

Estoy totalmente de acuerdo. Después de todo, solía usar tablas para el diseño. Sin embargo, con las complicaciones que entraron con las tablas, cambié a DIVs. Simplemente no me gusta usar tablas incorrectamente por orgullo y deseo de usar/corregir?/Documentación. Ah ... Parece que estaba emulando la página en IE6 ... Funciona bien. – Yoshiyahu

@Yoshiyahu Veo su punto y en general es una buena filosofía para trabajar, pero en este caso, el marcado requerido para hacerlo en CSS puro se ve peor y es más difícil de leer que una IMO 'table', así que tendería a hacer una excepción (también porque un elemento de tabla nativo funciona en IE6, mientras 'display- *' no) –

Punto tomado. En este punto, creo que estaré de acuerdo y usaré una tabla. Nota pequeña: Mis sitios web no son compatibles con IE6. No viceversa. – Yoshiyahu

Llega un punto en el que debe preguntarse "¿Realmente vale la pena?" Esta es una de esas situaciones en las que no lo es.

Fuente

2010-11-23 23:25:41 simshaun

¿Tal vez un problema con el navegador? Tu código funciona para mí en Chrome. Vea aquí: http://jsfiddle.net/xVTkP/

¿Qué está utilizando?

(pero en serio, como otros de los citados, utilizar una tabla)

Fuente

2010-11-23 23:26:14 Matt

Sí, lo emulaba usando IE6. Se olvidó de cambiarlo a Firefox ...:/ – Yoshiyahu

¿Qué navegador está usando? Estos valores aren't implemented perfectly en todos los navegadores. Aún así, ¿Cuál es el punto de intentar emular tablas con divs + CSS? ¿Por qué no usar una tabla?

creadores HTML generalmente evitan el uso de tablas de datos que no se tabulares debido a la temprana (en algún lugar en los últimos 10 años? No recuerdo) contragolpe que resultaron de uso excesivo de tablas como elementos de diseño. Piense: tablas anidadas en tablas anidadas, celdas vacías solo para relleno, etc. Superar esto. Use el elemento que hace el trabajo.

En lo personal, creo que table, table-row, table-cell, etc. deberían haber sido dejado fuera de la especificación CSS display.

Fuente

2010-11-23 23:26:18

Sé que esta es una publicación anterior, pero como nadie realmente solucionó tu problema con las DIV, pensé que lo probaría.

Su problema es simple ... los elementos de su celda son divs y, por lo tanto, se muestran en pantalla: bloque, use tramos en cambio para celdas de tabla (o agregue pantalla: en línea al .cell CSS).

<div class="table"> 
    <div class="tr"> 
    <span class="td">Row 1, Cell 1</span> 
    <span class="td">Row 1, Cell 2</span> 
    <span class="td">Row 1, Cell 3</span> 
    </div> 
    <div class="tr"> 
    <span class="td">Row 2, Cell 1</span> 
    <span class="td">Row 2, Cell 2</span> 
    <span class="td">Row 2, Cell 3</span> 
    </div> 
</div>

Fuente

2012-09-28 06:08:34

Los divs para la clase .td no son display: block, ni se mostrarán sus tramos con la clase .td aplicada: en línea, porque el autor ya está configurando la clase .td mostrar: tabla-celda –

<body> 
    <div style="display: table;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
     </div> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
     </div> 
    </div> 
</body>

Fuente

2013-08-06 14:13:16

Hacer que los DIV actúen como una tabla usando CSS

Respuesta

Cuestiones relacionadas