CSS table-layout Property
Example
Set different table layout algorithms:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Try it Yourself »
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!
| 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 | Play it |
|---|---|---|
| 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 | Play it » |
| 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 | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS Table
HTML DOM reference: tableLayout property
