Cómo crear una tabla solo usando la etiqueta <div> y Css

182

Quiero crear una tabla solo con <div>etiquetas y CSS.

Esta es mi tabla de muestra.

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Y estilo:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

Pero esta tabla no funciona con IE7 y versiones inferiores. Por favor, dame tu solución e ideas. Gracias.

html  css 
— Kumara
fuente
— Echa
32
¿Por qué quieres usar divpara crear una tabla?
— huy
3
ver buen artículo '¿Son las tablas CSS mejores que las tablas HTML?' [ vanseodesign.com/css/tables/]
— vladimir
55
Creo que la razón por la que alguien quiere usar una tabla basada en div en lugar de una tabla normal es que ... la representación / animaciones / reflujos en una tabla basada en div es en realidad más rápida (especialmente para un tamaño DOM grande) que renderizar una tabla normal. ..... vea esto .... stubbornella.org/content/2009/03/27/… esto .... developer.nokia.com/community/wiki/… arriba de eso todos los complementos de JavaScript intensivos en datos como slickgrid etc use divBasedtable
— bhavya_w
1
@huy ¡Probablemente porque los divs son más flexibles que las tablas!
— Kai Noack

Respuestas:

262 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Fragmento ejecutable:

Mostrar fragmento de código

— Shiva Komuravelly
fuente
224
¡Gracias! Alguien que realmente respondió a su pregunta y no solo dijo que "esa es una idea tonta". Odio cuando la gente no responde las preguntas ... Si él lo pregunta, debería ser respondido
— Brian Leishman
23
@stumpx: a veces la respuesta correcta es "no hagas eso". Éste es uno de esos momentos. Cuando tiene que preguntar "cómo hago una tabla usando divs y CSS", tiene uno de dos problemas: o está haciendo la pregunta incorrecta o está tratando de hacer lo incorrecto.
— cHao
28
@ cHao Si crees que esa debería ser la respuesta, ignórala y deja que alguien que realmente quiera responder la pregunta la responda.
— Brian Leishman
14
@stumpx: si creo que la pregunta no debería responderse , voto para cerrarla, porque la pregunta ni siquiera debería existir. Todas las preguntas válidas merecen una respuesta. Pero como dije, a veces la respuesta más correcta es "no lo hagas". ¿Es bueno aconsejar a alguien sobre cómo resolver el problema incorrecto? ¿Es bueno quedarse de brazos cruzados mientras otros ofrecen ese consejo? Yo digo que no.
— cHao
55
Si no sabe lo que su diseñador tiene en mente, dejar los datos en la estructura div como en el caso anterior es mucho mejor que dejarlos en la tabla. Mejor significa que es más fácil convertir divs flotantes a tablas que viceversa.
— anatoly techtonik
96

divs no debe usarse para datos tabulares. Eso es tan incorrecto como usar tablas para el diseño.
Use a <table>. Es fácil, semánticamente correcto, y terminarás en 5 minutos.

— Kobi
fuente
8
aunque puede depender de la aplicación. a veces lo que parece tabular puede ser lineal, aunque dividido. Por ejemplo, los calendarios pueden tener sus beneficios como divs en lugar de tablas
— Dan
2
@Dann: Pueden tener beneficios como una lista , pero un montón de divs es semánticamente tan malo como una tabla de diseño.
— cHao
44
Hay varias razones por las que estamos pidiendo que la mesa sea diseñada con DIV. Uno de los cuales es usar la etiqueta de tabla en SharePoint 2007 desordenar cada contenido que está presente en la página
— Shiva Komuravelly
2
@simplyletgo: Semánticamente, sería más apropiado diseñar las celdas de la tabla como bloques que tratar de hacer que los divs actúen como una tabla.
— cHao
1
¿Por qué no? si usa tablas, no puede agregar una barra de desplazamiento alrededor de ciertas celdas para que su tabla tenga encabezados bloqueados como Excel, por ejemplo. Las tablas tienen muchas limitaciones, ¿por qué no se puede hacer esto con divs?
— pilavdzice
9

Este es un hilo viejo, pero pensé que debería publicar mi solución. Recientemente enfrenté el mismo problema y la forma en que lo resolví es siguiendo un enfoque de tres pasos como se describe a continuación, que es muy simple sin ningún CSS complejo .

(NOTA: Por supuesto, para los navegadores modernos, el uso de los valores de table o table-row o table-cell para mostrar el atributo CSS resolvería el problema. Pero el enfoque que utilicé funcionará igualmente bien en navegadores modernos y antiguos, ya que no funciona). use estos valores para mostrar el atributo CSS).

ENFOQUE SIMPLE DE 3 PASOS

Para la tabla con divs solo para obtener celdas y filas al igual que en un elemento de tabla, use el siguiente enfoque.

  1. Reemplace el elemento de la tabla con un bloque div (use una .tableclase)
  2. Reemplace cada elemento tr o th con un bloque div (use una .rowclase)
  3. Reemplace cada elemento td con un bloque en línea div (use una .cellclase)

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>
Expandir fragmento

ACTUALIZACIÓN 1

Para evitar el efecto de que el mismo ancho no se mantenga en todas las celdas de una columna como se menciona thatslchen un comentario, uno podría adoptar cualquiera de los dos enfoques a continuación.

  • Especifique un ancho para cell clase

    cell {display: bloque en línea; ancho: 340px;}

  • Use CSS de navegadores modernos como se muestra a continuación.

    .table {display: table; } .row {display: table-row;} .cell {display: table-cell;}

— Sunil
fuente
1
Esto no lo hará ya que las columnas no son del mismo tamaño.
— thatsIch
Tiene razón acerca de que el ancho no se comporta como lo hace en un elemento de tabla. Sin embargo, si especifica un ancho para la clase .cell en su CSS como .cell {width: 300px;} entonces podría lograr un efecto similar. Pero, la limitación que mencionó siempre estará allí cuando use div a menos que defina un ancho para la clase CSS de celda. OTRA forma de obtener el mismo efecto sería usar las siguientes clases: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> en lugar de usar las clases mencionadas en la respuesta anterior.
— Sunil
@thatsIch, agregué ACTUALIZACIÓN 1 en mi respuesta que explica la solución para el problema de ancho que mencionaste
— Sunil
2

Use el tipo de documento correcto; Resolverá el problema. Agregue la línea a continuación en la parte superior de su archivo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— a B C D
fuente
2

Un poco fuera de tema, pero puede ayudar a alguien para un HTML más limpio ... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

Funciona en Chrome y Firefox.

— Harijs Krūtainis
fuente
2
¿Y si las celdas de su tabla tienen <div>elementos? Probablemente quieras.common_table div > div
— vol7ron
2

Al crear un conjunto personalizado de etiquetas de diseño, encontré otra respuesta a este problema. Aquí se proporciona el conjunto personalizado de etiquetas y sus clases CSS.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

La clave para conseguir que las celdas vacías y las celdas en general tengan el tamaño correcto es Box-Sizing and Padding. Border también hará lo mismo, pero crea una línea en la fila. El relleno no lo hace. Y, aunque no lo he probado, creo que Margin actuará de la misma manera que Padding, al forzar y vaciar la celda para que se represente correctamente.

— E Net Arch
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.