CSS table-layout

The CSS table-layout property allows you to control the algorithm used to lay out the table cells, rows, and columns.

The main benefit of table-layout is that it allows you to fix the table layout so that the table renders much faster. Without doing this, on large tables, users won't see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, 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.

Syntax

table-layout: auto | fixed

Possible Values

auto
The user agent uses the fixed table layout algorithm.
fixed
The user agent uses any automatic table layout algorithm.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
auto
Applies To
Tables and inline tables
Inherited?
No
Media
Visual

Example Code

table { 
  table-layout: fixed;
  }

Official Specifications