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

Preguntas HTML
⏰ 5 minutos de lectura

Avatar de usuario de Yoshiyahu
yoshiyahu

Muy bien, mientras diseñaba un sitio, se me ocurrió una idea… Tengo algunas partes de mi sitio que serían más adecuadas para actuar como una tabla, pero no son datos tabulares. Por alguna razón, realmente me molesta usar una tabla para algo que no es una tabla. Así que noté las opciones de visualización de CSS, pero no puedo hacer que funcione correctamente. Esto es lo que estoy intentando. ¿Cual es el problema?

<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 pareciera que se usó una tabla, pero todas las ‘celdas’ van en una nueva línea. ¿Alguna idea?

  • Funciona muy bien en Firefox 3.6.12. ¿Qué navegador estás usando?

    – Lucas Peterson

    23 de noviembre de 2010 a las 23:24

  • me parece una tabla de datos. Por favor, no reinvente la rueda con nombres de clase divs y css que reflejen el marcado de la tabla.

    – cuadrado rojo

    23 de noviembre de 2010 a las 23:25

  • @redsquare- Reinventar la rueda es mi especialidad.

    – Yoshiyahu

    24 de noviembre de 2010 a las 0:06

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

Pero como mi opinión, voy a decir que por el amor de Dios, solo use una tabla. 🙂

En serio. El argumento principal para no usar tablas en tales situaciones es que no son el elemento correcto semánticamente. Pero mirando esa sopa div, tienes que admitir una <table> es la forma más preferible de construir, incluso si no es exactamente datos tabulares que está mostrando.

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

    – Yoshiyahu

    23 de noviembre de 2010 a las 23:35

  • @Yoshiyahu Veo su punto y generalmente 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 un table En mi opinión, tendería a hacer una excepción (también porque un elemento de tabla nativo funciona en IE6, mientras que display-* no es)

    – Peka

    23 de noviembre de 2010 a las 23:36

  • Punto a favor. 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

    24 de noviembre de 2010 a las 0:07

  • Tengo que cambiar a div porque el atributo contenteditable no funciona con table/td en Edge.

    – TARKUS

    25 de abril de 2018 a las 10:21

Sé que esta es una publicación antigua, pero como nadie solucionó su problema con los DIV, pensé en intentarlo.

Su problema es simple … sus elementos de celda son divs y, por lo tanto, se muestran: bloque, use intervalos en lugar de celdas de tabla (o agregue display:inline a .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>

  • Los divs para la clase .td no son display:block, ni sus tramos con la clase .td aplicada serán display:inline, porque el autor ya está configurando la clase .td para mostrar:table-cell

    -Jimbo Jonny

    19/10/2015 a las 14:38

avatar de usuario de amit jain
amit jain

<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>

  • ¿En qué se diferencia esto del fragmento de código original (excepto que usa style="..." en lugar de class y CSS)?

    – Maximouse

    16 de abril de 2020 a las 17:41

¿Quizás un problema del navegador? Tu código me funciona en Chrome. Mira aquí: http://jsfiddle.net/xVTkP/

¿Que estas usando?

(pero en serio, como dijeron otros, usa una tabla)

¿Qué navegador estás usando? Estos valores no se implementan perfectamente en todos los navegadores. Aún, Cuál es el punto de de tratar de emular tablas con divs+CSS? ¿Por qué no usar una mesa?

Los creadores de HTML generalmente evitan usar tablas para datos que no son tabulares debido a la reacción violenta temprana (¿en algún momento de los últimos 10 años? No recuerdo) que resultó de uso excesivo de tablas como elementos de diseño. Piense: tablas anidadas en tablas anidadas, celdas vacías solo para relleno, etc. Superalo. Utilice el elemento que hace el trabajo.

Personalmente pienso que table, table-row, table-celletc. deberían haberse dejado fuera del CSS display Especificaciones.

¿Ha sido útil esta solución?