Example
Set different table layout algorithms:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Try it Yourself »
Definition table-layout
Подработка: Перевод страницы
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 table-layout
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
table-layout: auto|fixed|initial|inherit;
Property Values table-layout
| 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 |
Related Pages table-layout
CSS tutorial: CSS Table
HTML DOM reference: tableLayout property