Ancho igual de celda de tabla CSS

148

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>

¿Hay una manera pura de CSS para que las celdas de la tabla tengan el mismo ancho incluso si tienen contenido de diferente tamaño dentro de ellas?

Gracias.

Editar: ¿Tener un ancho máximo implicaría saber cuántas celdas tiene, creo?

Harry
fuente
¿Cómo se determina el número de columnas: cliente o servidor?
iambriansreed
Después de probar algunos métodos, creo que si desea tener varias filas y desea que tengan el mismo ancho, use flexbox en lugar de tabla
Eric

Respuestas:

299

Aquí hay un violín que funciona con un número indeterminado de celdas: http://jsfiddle.net/r9yrM/1/

Puede fijar un ancho a cada padre div(la tabla ), de lo contrario será 100% como de costumbre.

El truco es usar un table-layout: fixed;poco de ancho en cada celda para activarlo, aquí 2%. Eso activará el otro algoritmo de la tabla, aquel en el que los navegadores se esfuerzan mucho por respetar las dimensiones indicadas.
Pruebe con Chrome (e 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 */
}

EDITAR (2013): Cuidado con Safari 6 en OS X, tiene un table-layout: fixed; error (o tal vez simplemente diferente, muy diferente de otros navegadores. No revisé el diseño de la tabla CSS2.1 REC;)). Prepárate para diferentes resultados.

FelipeAls
fuente
1
Gracias, esta parece ser la respuesta. No sé por qué, pero si configuro el ancho al 2%, en realidad desplaza cada columna al 2%. Pero el 100% parece funcionar muy bien. ¿Alguna idea de lo que está pasando allí?
Harry
3
Me encontré con el mismo problema de necesitar usar el 100% de ancho en las celdas de la tabla. Esto estaba sucediendo debido a un clearfix aplicado al elemento padre con display: table. Como las celdas de 100% de ancho no funcionan en IE8, la solución para mí fue eliminar el clearfix. Esperemos que esto ayude a alguien.
Alex Barrett
Para ampliar esto, esto funciona para diseños simples (1x1, 2x2, 3x3, etc.) pero los diseños complejos (1x3x1, 1x2x3x4, etc.) requieren divs adicionales display:tablepara usarse como si fueran filas, no display:tabl-rowcomo algunos podrían esperar. Ejemplo aquí .
filoxo
2
El ancho del 100% no funcionó en IE8 (sorpresa), pero la sugerencia inicial del 2% proporciona los resultados correctos.
1
El 100% de ancho tampoco funcionó en IE10. Se hizo el trabajo en IE11. Y 1% de ancho hizo que Mobile Safari mostrara columnas súper estrechas. Así que terminé usando un hack CSS dirigido a IE9 e IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }el hack CSS es de aquí: stackoverflow.com/a/24321386/6962
Henrik N
29

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

MANIFESTACIÓN.

El alfa
fuente
El violín no funciona aquí. Las celdas son siempre del 25%.
netAction
Esta solución no es muy escalable para nada dinámico, como la navegación del sitio controlada por el cliente.
Eric K
Probablemente tengas razón y, por cierto, tiene casi dos años anser @QuantumDynamix. ¿Tienes algo mejor en mente? ¿Por qué no simplemente compartir su idea, dejar que el mundo sepa cosas mejores :-)
The Alpha
15

Solo usar max-width: 0en el display: table-cellelemento 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>

José Antonio Postigo
fuente
1
Simplemente quisquilloso aquí, pero 0pxno es una unidad válida. Solo debería ser 0.
Gavin
Esto funcionó para mí, pero ¿podría explicar cómo funciona esto?
Emmanual
6

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 relacionados con el intento de hacer que los divs funcionen como tablas. Tuvieron que agregar table-xxx para imitar diseños de tabla

Las tablas son compatibles y funcionan muy bien en todos los navegadores. ¿Por qué deshacerse de ellos? el hecho de que tuvieran 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 datos tabulados o algo similar a las tablas de datos tabulados, simplemente funcione.

Respuesta muy tardía, lo sé, pero vale la pena expresarlo.

DesarrolladorChris
fuente
2
+1 porque funciona y porque CSS todavía, en 2014 no lo hace correctamente en todos los navegadores.
Yuck
66
A veces, desea un diseño similar a una tabla para cosas que no son datos comprimidos. por ejemplo, elementos de navegación que debe utilizar <nav>, <ul>etc.
Ben
1
Para responder es ideal tener un diseño basado en div. Mostrar tablas en dispositivos móviles es un fastidio.
Pablo Rincón
Intentar emular una tabla impide el diseño receptivo. Estoy de acuerdo si desea un diseño receptivo, las tablas no son la opción.
DeveloperChris
2
Las tablas se crearon para mostrar datos tabulares: era, es y serán los elementos HTML que se usarán para mostrar datos tabulares, ¿por qué alguien los abandonaría (para ese propósito)? El diseño de la tabla no se imita : ha sido parte de la recomendación de CSS2 durante un tiempo y sucede que el diseño predeterminado de las tablas HTML es display: table-etc(bastante natural). No me paso el día haciendo enlaces que simulan divs o divs que imitan tablas, tramos o entradas: solo estoy usando CSS para diseñar. Finalmente, buena suerte con IE9 para aplicar cualquier otro valor de displaypropiedad a los elementos table, tr, td.
FelipeAls
1

esto funcionará para todos

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Esto también funcionará para los datos de la tabla creados por iteración

tcasante1
fuente
0

Aqui tienes:

http://jsfiddle.net/damsarabi/gwAdA/

No puede usar ancho: 100px, porque la pantalla es celda de tabla. Sin embargo, puede usar Max-width: 100px. entonces su caja nunca será más grande que 100px. pero debe agregar desbordamiento: oculto para asegurarse de que el contenido no sangra a otras celdas. también puede agregar espacios en blanco: ahora si desea evitar que la altura aumente.

Sammy
fuente
0

Esto se puede hacer estableciendo el estilo de celda de tabla width: autoy el contenido vacío. Las columnas ahora tienen el mismo ancho, pero no tienen contenido.

Para insertar contenido en la celda, agregue un divcon css:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

También necesita agregar position: relativea las celdas.

Ahora puede poner el contenido real en el div mencionado anteriormente.

https://jsfiddle.net/vensdvvb/

RnMss
fuente