Hay una propiedad CSS para tablas que, me parece, está bien soportada, es poco conocida y muy útil. Cambia la forma en que se representan las tablas de modo que le brinda un diseño más resistente y predecible.
Es esto:
table {
table-layout: fixed;
}La propiedad predeterminada para table-layout es auto, y ese es el diseño de la tabla que creo que la mayoría de nosotros conocemos. Ese estilo, para mí, se siente esponjoso y extraño. Aquí hay una exploración:
Vea que las tablas predeterminadas de la pluma son raras. por Chris Coyier (@chriscoyier) en CodePen.
Con table-layout: fixed;
Las cosas se vuelven mucho más sólidas y predecibles con la propiedad / valor en su lugar.
El diseño se fija en función de la primera fila. Establezca el ancho de esos, y el resto de la tabla sigue.
Es un poco más complicado, pero no mucho. Aquí hay una exploración:
Consulte las tablas solucionadas con lápiz que resuelven algunos problemas de Chris Coyier (@chriscoyier) en CodePen.
Caso de uso
Exploré esto porque estaba tratando de mantener una altura de fila uniforme para los bolígrafos en la vista de lista en CodePen (es decir, no ajustar los títulos del bolígrafo) pero tampoco aumentar el ancho de la tabla. Esto funcionó muy bien.
Imagino que la mayoría de ustedes saben esto: las tablas son para datos tabulares y correos electrónicos. No diseños web, por razones.
HTML y CSS prácticos
Imagino que la mayoría de los usos serán así:
<table class="users">
<thead>
<tr>
<th class="row-1 row-ID">ID</th>
<th class="row-2 row-name">Name</th>
<th class="row-3 row-job">Job</th>
<th class="row-4 row-email">Email<th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>Johnny Five</td>
<td>Robotin'</td>
<td>[email protected]</td>
</tr>
<tr>
<td>0002</td>
<td>Super Superlonglastnamesmith</td>
<td>Doin' stuff</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>.users {
table-layout: fixed;
width: 100%;
white-space: nowrap;
}
.users td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Column widths are based on these cells */
.row-ID {
width: 10%;
}
.row-name {
width: 40%;
}
.row-job {
width: 30%;
}
.row-email {
width: 20%;
}Vea el Pen xFcrp de Chris Coyier (@chriscoyier) en CodePen.
Por si acaso, sepa que puede utilizar el <col> elemento para establecer los anchos de columna también, porque afectan a la primera fila de celdas y se trata de que la primera fila de celdas establezca la base para el resto de la tabla.
Velocidad de diseño
Escuché que este estilo de diseño de tabla también es más rápido, lo cual es lógico porque no es necesario analizar el contenido de toda la tabla para saber qué tan grandes serán los anchos de columna. Sin embargo, no tengo datos al respecto.
En correos electrónicos
La tabla de soporte de Campaign Montior para CSS en clientes de correo electrónico muestra que el diseño de la tabla es compatible en todos los ámbitos.
Más información
- Mucho más información sobre
<table>s - diseño de tabla en MDN. Incluya soporte de navegador, que básicamente equivale a ubicuo.
Tweets de seguimiento
@chriscoyier eso es lo que solía hacer ungrid, mi cuadrícula receptiva tiene solo 97 bytes http://t.co/RgIFjpcCXu
– Chris Nager (@chrisnager) 2 de julio de 2014
@chriscoyier Chekkit: http://t.co/lO62D4lECK
– Harry Roberts (@csswizardry) 2 de julio de 2014
@chriscoyier @twbootstrap está usando esto para manejar grupos de botones horizontales: https://t.co/dhLRuN0Jof
– Lucas Constantino (@luconsilva) 2 de julio de 2014
@chriscoyier Chris, ¿hay alguna razón para no usar solo el diseño de tabla: fijo todo el tiempo?
– Mike Aparicio (@peruvianidol) 2 de julio de 2014