Propiedad de diseño de tabla CSS

❮ Anterior Referencia completa de CSS Siguiente ❯

Ejemplo

Establecer diferentes algoritmos de diseño de tabla:

table.a {
table-layout: auto;
width: 180px;
}

table.b {
table-layout: fixed;
width: 180px;
}

Definición y uso

La table-layoutpropiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.

Consejo: El principal beneficio del diseño de la tabla: fijo; es que la tabla renderiza mucho más rápido. En tablas grandes, los usuarios no verán ninguna parte de la tabla hasta que el navegador haya representado la tabla completa. Entonces, si usa table-layout: fixed, los usuarios verán la parte superior de la tabla mientras el navegador carga y procesa el resto de la tabla. ¡Esto da la impresión de que la página se carga mucho más rápido!

Valor por defecto:	auto
Heredado:	No
Animable:	No. Leer sobre animable
Versión:	CSS2
Sintaxis de JavaScript:	objeto .style.tableLayout="fijo"

Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Property
table-layout	14.0	5.0	1.0	1.0	7.0

Sintaxis CSS

table-layout: auto|fixed|initial|inherit;

Valores de propiedad

Value	Description	Play it
auto	Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout
fixed	Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

páginas relacionadas

Tutorial CSS: Tabla CSS

Referencia HTML DOM: propiedad tableLayout