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.
divpara crear una tabla?divs son más flexibles que las tablas!Respuestas:
Fragmento ejecutable:
Mostrar fragmento de código
fuente
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.fuente
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.
.tableclase).rowclase).cellclase)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
cellclasecell {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;}
fuente
Si hay algo
<table>que no le gusta, tal vez podría usar el archivo de reinicio ?o
si necesita esto para el diseño de la página, consulte los ejemplos de diseño de cssplay para diseñar sitios web sin tablas.
fuente
No veo ninguna respuesta considerando Grid-Css. Creo que es un enfoque muy elegante: grid-css incluso admite intervalos de filas y columnas. Aquí puedes encontrar un muy buen artículo:
https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611
fuente
Use el tipo de documento correcto; Resolverá el problema. Agregue la línea a continuación en la parte superior de su archivo HTML:
fuente
Un poco fuera de tema, pero puede ayudar a alguien para un HTML más limpio ... CSS
HTML
Funciona en Chrome y Firefox.
fuente
<div>elementos? Probablemente quieras.common_table div > divAl 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
CSS
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.
fuente