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

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

Example Code

Official Specifications

• CSS Table Module Level 3 (W3C Working Draft)
• CSS Level 2.1 (W3C Recommendation 07 June 2011)