tablas - espacio entre filas tabla html
CSS ancho de celda de tabla igual (6)
Tengo un número indeterminado de elementos de celda de tabla dentro de un contenedor de tabla.
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
¿Existe una forma pura de CSS para que las celdas de la tabla tengan el mismo ancho incluso si tienen contenido de diferentes tamaños dentro de ellas?
Gracias.
Editar: Tener un ancho máximo implicaría saber cuántas células tienes, ¿no?
Aquí hay un violín que funciona con un número indeterminado de celdas: http://jsfiddle.net/r9yrM/1/
Puede corregir el ancho de cada div principal (la tabla ); de lo contrario, será 100% como de costumbre.
El truco es usar table-layout: fixed; y algo de ancho en cada celda para activarlo, aquí un 2%. Eso activará el otro algoritmo de tabla, aquel en el que los navegadores intentan mucho respetar las dimensiones indicadas.
Por favor, prueba con Chrome (y IE8, si es necesario). Está bien con un Safari reciente, pero no recuerdo la compatibilidad de este truco con ellos.
CSS (instrucciones relevantes):
div {
display: table;
width: 250px;
table-layout: fixed;
}
div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}
EDIT (2013): Cuidado con Safari 6 en OS X, tiene table-layout: fixed; mal (o tal vez simplemente diferente, muy diferente de otros navegadores. No revisé el diseño de la tabla REC de CSS2.1;)). Prepárate para diferentes resultados.
Aqui tienes:
http://jsfiddle.net/damsarabi/gwAdA/
No puede usar width: 100px, porque la pantalla es table-cell. Sin embargo, puede usar el ancho máximo: 100 px. entonces tu caja nunca será más grande que 100px. pero necesita agregar desbordamiento: oculto para asegurarse de que el contenido no sangra a otras celdas. también puede agregar espacios en blanco: nowrap si desea evitar que la altura aumente.
Esto puede hacerse configurando el estilo de celda de tabla en width: auto y contenido vacío. Las columnas son ahora iguales, pero no contienen contenido.
Para insertar contenido en la celda, agrega un div con css:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
También necesita agregar position: relative a las celdas.
Ahora puede poner el contenido real en el div hablado anteriormente.
Reemplazar
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
con
<table>
<tr><td>content cell1</td></tr>
<tr><td>content cell1</td></tr>
</table>
Mire todos los problemas que rodean tratando de hacer que los divs funcionen como tablas. Tuvieron que agregar table-xxx para imitar diseños de tablas
Las tablas son compatibles y funcionan muy bien en todos los navegadores. ¿Por qué deshacerse de ellos? el hecho de que tuvieron que imitarlos es una prueba de que hicieron bien su trabajo.
En mi opinión, use la mejor herramienta para el trabajo y si desea que los datos tabulados o algo que se asemeje a tablas de datos tabulados simplemente funcionen.
Respuesta muy tardía, lo sé, pero vale la pena expresarlo.
Solo uso max-width: 0 en la display: table-cell elemento display: table-cell funcionó para mí:
.table {
display: table;
width: 100%;
}
.table-cell {
display: table-cell;
max-width: 0px;
border: 1px solid gray;
}
<div class="table">
<div class="table-cell">short</div>
<div class="table-cell">loooooong</div>
<div class="table-cell">Veeeeeeery loooooong</div>
</div>
HTML
<div class="table">
<div class="table_cell">Cell-1</div>
<div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
<div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
<div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>
CSS
.table{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell{
display:table-cell;
width:100px;
border:solid black 1px;
}