table-layout

The table-layout property specifies how to lay out table columns, rows, and cells.

CSS does not specify an “optimal” layout for tables. User agents size table cells, columns, and rows based on algorithms specific to each of them. CSS does, however, define constraints that user agents must respect when laying out a table. Using table-layout you can specify one of two algorithms used to lay out tables: the fixed table layout, and the automatic table layout.

When you use table-layout, the user agent (browser, mail app, etc.) decides how to size and lay out tables and size columns, rows, and cells based on the CSS applied by you, by the user agent itself, and based on the content inside each table cell.

The Fixed Table Layout

The horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing.

The width of the table itself may be specified explicitly with the width property. If you don’t specify a width, the user agent will use the automatic table layout. Unless otherwise specified, in the examples of this section, a width of ‘100%’ is specified.

The width of the columns of the table is calculated based on whether or not you specify a width for these columns or not.

If you don’t specify a width for any column, the columns are sized evenly, no matter how much content a cell inside a column may contain.

View this demo on the Codrops Playground

If you specify widths for the columns, those widths are going to be used. The width of the table is then the greater of its own width (set using width) and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns. For example, if the sum of the widths of the columns is greater than the sum you specified for the table itself, then the width of the table will be equal to that sum.

View this demo on the Codrops Playground

In both of the above cases, we’ve set the widths of both columns. If you specify the width of only one column, any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The Automatic Table Layout

With the automatic table layout, the table’s width is given by the width of its columns (and intervening borders). The column widths are determined based on the content of the widest cell in a column, unless an explicit column width is specified.

When the table width is not specified, its width is the sum of widths of its columns. The widths of the columns are determined based on the content of the cell with the most amount of content (per column):

View this demo on the Codrops Playground

Of course, you can always specify an explicit width for the table. When the table has an explicit width, and the columns don’t have explicit widths, their widths are determined proportionally depending on the amount of content in the cells:

View this demo on the Codrops Playground

If you specify explicit widths for the columns, those widths will be used, and the width of the table will be equal to the sum of these widths if it does not have an explicit width.

View this demo on the Codrops Playground

If the width of the table is set, the widths of the columns are set, and the width of the columns is less than the width of the table, the remaining white space is distributed among the columns evenly.

View this demo on the Codrops Playground

If the sum of widths of the columns is greater than the specified width of the table in the automatic table layout, the table will not expand to the sum of widths of the columns.

View this demo on the Codrops Playground

Trivia & Notes

The behavior of the fixed and automatic table layout algorithms is interesting when the text inside the cells is set not to wrap using <a href="http://tympanus.net/codrops/css_reference/white-space">white-space</a>: nowrap.

With the fixed table layout, the width set on the columns is respected even if it means that the text will overflow the cells:

View this demo on the Codrops Playground

However, using the automatic table layout, the cell will expand to fit the content inside it, so will the column that the cell belongs to, and possibly also the entire table.

View this demo on the Codrops Playground

Columns with Mixed Width Units

Width specified in absolute width units such as px get a priority over those specified in percentages.

For example, if you have a 814px wide table as in the examples above, and you set the first column width to 500px and the second column width to 50% (that is 412px), the sum of widths is greater than the width of the table, so:

• In the case of a fixed table layout, the first column gets the 500px width, and the second column gets the remainder of the width, which is less than the percentage value specified.
• In case of the automatic table layout, the two widths are compared, and then each column gets a width so that the ratio of the two widths is preserved as much as possible. The value calculated for each column is dependent on the exact behavior which differs between user agents.

In neither of the two cases does the table expand to the sum of widths of the columns.

table {
    table-layout: fixed;
}

table.stats {
    table-layout: auto;
}

table.child {
    table-layout: inherit;
}