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.


table-layout: auto | fixed

Possible Values

The user agent uses the fixed table layout algorithm.
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:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
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
Applies To
Tables and inline tables

Example Code

table { 
  table-layout: fixed;

Official Specifications