Diseño de tabla - Trucos CSS | Almanaque CSS 2024

La table-layoutpropiedad define qué algoritmo debe usar el navegador para diseñar filas, celdas y columnas de la tabla.

table ( table-layout: fixed; )

Como se explica en la especificación CSS2.1, el diseño de la tabla en general suele ser una cuestión de gusto y variará según las opciones de diseño. Sin embargo, los navegadores aplicarán automáticamente ciertas restricciones que definirán cómo se distribuyen las tablas. Esto sucede cuando la table-layoutpropiedad se establece en auto(el valor predeterminado). Pero estas restricciones se pueden eliminar cuando table-layoutse establece en fixed.

Valores

auto: el valor por defecto. El algoritmo automático del navegador se utiliza para definir cómo se distribuyen las filas, celdas y columnas de una tabla. El diseño de la tabla resultante generalmente depende del contenido de la tabla.
fixed: Con este valor, el diseño de la tabla ignora el contenido y, en su lugar, usa el ancho de la tabla, cualquier ancho especificado de columnas y valores de espaciado de borde y celda. Los valores de columna utilizados se basan en anchos definidos en columnas o celdas para la primera fila de la tabla.
inherit: indica que el valor se hereda del table-layoutvalor de su padre

Para que un valor de fixedtenga algún efecto, el ancho de la tabla debe establecerse en un valor diferente a auto(el valor predeterminado para la widthpropiedad). En las demostraciones a continuación, todos los anchos de la tabla están configurados al 100%, lo que supone que queremos que la tabla llene su contenedor principal horizontalmente.

La mejor manera de ver los efectos de un algoritmo de diseño de tabla fijo es mediante una demostración.

Vea la demostración de Pen para la propiedad de diseño de tabla de CSS de Louis Lazaris (@impressivewebs) en CodePen.

Cuando vea la demostración anterior por primera vez, notará que el diseño de las columnas de la tabla está desequilibrado y es incómodo. En ese momento, la tabla está utilizando el algoritmo predeterminado del navegador para definir cómo diseñar la tabla, lo que significa que el contenido dictará el diseño. La demostración exagera este hecho al incluir una larga cadena de texto dentro de una celda de la tabla, mientras que todas las demás celdas de la tabla usan solo dos palabras cada una. Como puede ver, el navegador expande la primera columna para acomodar el contenido más grande.

Si hace clic en el botón "Alternar diseño de tabla: fijo", verá cómo se ve el diseño de la tabla cuando se utiliza el algoritmo "fijo". Cuando table-layout: fixedse aplica, el contenido ya no dicta el diseño, sino que el navegador usa cualquier ancho definido de la primera fila de la tabla para definir el ancho de columna. Si no hay anchos presentes en la primera fila, los anchos de las columnas se dividen por igual en la tabla, independientemente del contenido dentro de las celdas.

Más ejemplos pueden ayudar a aclarar esto. En la siguiente demostración, la tabla tiene un elemento cuyo primer elemento tiene un ancho de 400px. Observe que en este caso, alternar table-layout: fixedno tiene ningún efecto.

Vea la demostración de Pen para la propiedad de diseño de tabla de CSS de Louis Lazaris (@impressivewebs) en CodePen.

Esto sucede porque el algoritmo de diseño predeterminado básicamente dice "haga que la primera columna tenga un ancho de 400 px y distribuya las columnas restantes según su contenido". Dado que las otras tres columnas tienen el mismo contenido entre sí, no habrá cambios. Pero ahora agreguemos algo de contenido de texto adicional a una de las otras columnas:

Vea la demostración de lápiz para la propiedad de diseño de tabla de CSS con ancho de columna y contenido variable de Louis Lazaris (@impressivewebs) en CodePen.

Ahora, si hace clic en el botón de alternancia, verá que las columnas se ajustan para adaptarse a un diseño fijo, independientemente del contenido. Una vez más, está sucediendo lo mismo; la primera columna se establece en 400px, luego las columnas restantes se dividen por igual. Pero esta vez, debido a que una de las columnas tiene contenido extra, la diferencia es notable.

Cómo un algoritmo de diseño fijo determina el ancho de las columnas

Las siguientes dos demostraciones deberían ayudar a comprender que la primera fila de la tabla es lo que ayuda a definir los anchos de columna de un conjunto de tablas table-layout: fixed.

Vea la Demostración de Pen para el diseño de tabla de CSS con celda en la fila 1 dado el ancho definido por Louis Lazaris (@impressivewebs) en CodePen.

En la demostración anterior, la primera celda de la primera fila de la tabla tiene un ancho de 350 px. Alternar table-layout: fixedajusta las otras columnas, pero la primera sigue siendo la misma. Ahora prueba la siguiente demostración:

Vea la Demostración de Pen para el diseño de tabla de CSS con celda en la fila 2 dado el ancho definido por Louis Lazaris (@impressivewebs) en CodePen.

En este caso, es la segunda fila la que tiene un ancho adjunto a su primera celda de la tabla. Ahora, cuando se hace clic en el botón de alternancia, se ajustan todos los anchos de columna. Una vez más, esto se debe a que el algoritmo de diseño fijo utiliza la primera fila para determinar los anchos de las columnas y el resultado final es que distribuye los anchos por igual.

Beneficios de un algoritmo de diseño fijo

Los beneficios estéticos del uso table-layout: fixeddeben quedar claros en las demostraciones anteriores. Pero el otro gran beneficio es el rendimiento. La especificación se refiere al algoritmo fijo como un algoritmo "rápido", y por una buena razón. El navegador no necesita analizar el contenido de toda la tabla antes de determinar el tamaño de las columnas; solo necesita analizar la primera fila. Entonces, el resultado es un procesamiento más rápido del diseño de la tabla.