CSS table-layout Property

❮ Previous Complete CSS Reference Next ❯

Example

Set different table layout algorithms:

table.a {
table-layout: auto;
width: 180px;
}

table.b {
table-layout: fixed;
width: 180px;
}

Definition and Usage

The table-layout property defines the algorithm used to lay out table cells, rows, and columns.

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!

Show demo ❯

Default value:	auto
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.tableLayout="fixed" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
table-layout	14.0	5.0	1.0	1.0	7.0

CSS Syntax

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

Property Values

Value	Description	Demo
auto	Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout	Demo ❯
fixed	Sets a fixed table layout algorithm. 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, regardless of content inside the cells	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Table

HTML DOM reference: tableLayout property