CSS table-layout Property

The table-layout CSS property specifies the algorithm used to lay out the table cells, rows, and columns. The following table summarizes the usages context and the version history of this property.

Tip: The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!

CSS Syntax

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

Property Value:

  • auto: It is used to set the automatic table layout on the browser. This property set the column width by unbreakable content in the cells.
  • fixed: It is used to set a fixed table layout. 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 according to content of table.
  • initial: It is used to set its default value.
  • inherit: It is used to inherit the property from its parent.

Example -