The table-layout property sets an algorithm that is used to lay out the table cells, rows and columns. This property is used to specify the layout of table elements.
CSS
table-layout: value;
By default, the width of table columns depend on the width of the content inside them. This behaviour comes under the automatic table layout. However, this can be changed using the table-layout property.
There are two types of table layouts.
Automatic Table Layout - In this layout, the width of table and its columns depend on the width of the content. This is the default table layout in most of the browsers.
Fixed Table Layout - In this layout, table and column widths are fixed and don't depend on the width of the content of the table's cells.
These table layouts are discussed after the values of the table-layoutproperty.
Values
auto : Browser uses the automatic table layout algorithm. This is the default value for most of the browsers.
fixed : Browser uses the fixed table layout algorithm.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
The two table layouts are discussed below.
Automatic Table Layout
As stated earlier, if no table or column width is specified, then the column width is determined by the width of the cell with the longest content in that column. In that case, the table width is determined by the width of its columns (i.e. sum of the widths of its columns including border widths).
See the Pen automatic table layout by Aakhya Singh (@aakhya) on CodePen.
If the column widths are explicitly specified and the table width is not specified, then the columns will take the explicitly defined widths and the table width will be equal to the sum of the widths of its columns.
If the table width is explicitly specified and the column widths are not specified, then the table will take the specified width and the column widths will be proportional to the width of the cell with the longest content in the respective columns.
See the Pen automatic table layout by Aakhya Singh (@aakhya) on CodePen.
If the table width and all the column widths are explicitly specified, and if the table width is less than the sum of all the column widths, then the table will take the explicitly specified width and the columns will be assigned widths proportional to the length of their content.
See the Pen Determining width of table using table-layout: auto by Aakhya Singh (@aakhya) on CodePen.
Fixed Table Layout
In this layout, table and column widths are fixed. These don't depend on the length of the content in the cells. If no table width is specified, then the browser will use the automatic table layout.
If the table width is explicitly specified and the column widths are not specified, then the table will take the specified width and this width will be equally divided among the columns irrespective of the content in them.
See the Pen table-layout: fixed by Aakhya Singh (@aakhya) on CodePen.
If the table width and the column widths are explicitly specified and if the table width is less than the sum of the widths of the columns, then the table will take the explicitly defined width which will be equally divided among all the columns.
See the Pen Determining table width using table-layout: fixed by Aakhya Singh (@aakhya) on CodePen.
Examples
In the following example, the two tables are given a width of 500px. Since the first table is given table-layout: auto, so the widths of its columns are proportional to the lengths of the longest content in them. The second table is given table-layout: fixed and so the widths of its columns are equal, irrespective of their content.
See the Pen table-layout property values by Aakhya Singh (@aakhya) on CodePen.
Another example below shows that the cells don't expand even if their content overflows them in the fixed table layout. However, in the automatic table layout, the cells expand to accomodate their content.
See the Pen table-layout property values by Aakhya Singh (@aakhya) on CodePen.
Significance of table-layout property
Automatic table layout algorithm (default) makes the table appear slow because it decides the final layout of the table only after reading through all its content. As a result, no part of the table is visible until the entire table has been rendered by the browser. This may make it appear as if the page loads slowly, especially in case of large tables.
On the other hand, in fixed table layout algorithm, the table starts to get displayed as soon as the browser renders its first row. This is because in this layout, the widths of the table and the columns don't depened on the content. This gives an impression as if the page loads faster.
Browser Support
This property is supported in all the major browsers.
