CSS table-layout property

Definition and Usage

The tableLayout property is used to display the algorithm rules for the display of table cells, rows, and columns.

Fixed table layout:

Compared to automatic table layout, fixed table layout allows the browser to layout the table faster.

In fixed table layout, the horizontal layout depends only on the table width, column width, table border width, and cell spacing, and is unrelated to the cell content.

By using fixed table layout, the user agent can display the table after receiving the first row.

Automatic table layout:

In automatic table layout, the column width is determined by the widest content without a wrap in the column cell.

This algorithm can sometimes be slow, as it needs to access all the content in the table before determining the final layout.

Description

This property specifies the layout algorithm used to complete the table layout. The fixed layout algorithm is faster but less flexible, while the automatic algorithm is slower but better reflects the traditional HTML table.

See also:

CSS Tutorial:CSS Table

HTML DOM Reference Manual:tableLayout Property

Example

Set the table layout algorithm:

table
  {
  table-layout:fixed;
  }

Try it yourself

CSS Syntax

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

Property Value

Value Description
automatic Default. Column widths are determined by the cell content.
fixed Column widths are determined by the table width and column width settings.
inherit Specifies whether the table-layout property should be inherited from the parent element.

Technical Details

Default Value: auto
Inheritance: yes
Version: CSS2
JavaScript Syntax: object.style.tableLayout="fixed"

More examples

Setting the table layout
This example demonstrates how to set the layout of the table.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
14.0 5.0 1.0 1.0 7.0