table-layout

The table-layout property designates the algorithm used to lay out cells, rows, and columns in a table.

Syntax

Using table-layout: fixed renders the table much faster than table-layout: auto.

table.a {
  table-layout: auto;
}

table.f {
  table-layout: fixed;
}

Values

auto
Default value. Browsers use an automatic layout algorithm – the content dictates the layout.

fixed
Designates a fixed table algorithm. Table and column widths are set by the widths of table or col or by the width of the first row of cells. Cells in any other rows do not impact table width. I no widths are set for the first row, then the column widths are equally divided across the table, regardless of their cells’ content.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of table-layout? Submit a codepen.io demo and we'll showcase it here ↴