Automatic Table Layout
The automatic-layout model, although not as fast as the fixed-layout, is likely to be much more familiar to authors because it’s substantially the same model that HTML tables have used for years. In most current user agents, use of this model will be triggered by a table with a width of auto, regardless of the value of table-layout—although this is not assured.
The details of the model can be expressed in the following steps:
For each cell in a column, calculate both the minimum and maximum cell width.
Determine the minimum width required to display the content. In determining the minimum content width, the content can flow to any number of lines, but it may not stick out of the cell’s box. If the cell has a
widthvalue that is larger than the minimum possible width, then the minimum cell width is set to the value ofwidth. If the cell’swidthvalue isauto, then the minimum cell width is set to the minimum content width.For the maximum width, determine the width required to display the content without any line-breaking, other than that forced by explicit line-breaking (e.g., due to the
<br>element). That value is the maximum cell width.For each column, calculate both the minimum and maximum column width.
The column’s minimum width is determined by the largest minimum cell width of the cells within the column. If the column has been given an explicit
widthvalue that is larger than any of the minimum cell widths within the column, then the minimum column width is set to the value ofwidth.For the maximum width, take the largest maximum cell width of the cells within the column. If the column has been given an explicit
widthvalue that is larger than any of the maximum cell widths within the column, then the maximum column width is set to the value ofwidth. These two behaviors recreate the traditional HTML table behavior of forcibly expanding any column to be as wide as its widest cell.
In cases where a cell spans more than one column, the sum of the minimum column widths must be equal to the minimum cell width for the spanning cell. Similarly, the sum of the maximum column widths must equal the spanning cell’s maximum width. User agents should divide any changes in column widths equally among the spanned columns.
In addition, the user agent must take into account that when a column width has a percentage value for its width, the percentage is calculated in relation to the width of the table—even though that width is not known yet. The user agent must hang on to the percentage value and use it in the next part of the algorithm. Once the user agent has determined how wide or narrow each column can be, it can calculate the width of the table. This happens as follows:
If the computed width of the table is not
auto, then the computed table width is compared to the sum of all the column widths plus any borders and cell-spacing. (Columns with percentage widths are likely calculated at this time.) The larger of the two values is the final width of the table. If the table’s computed width is larger than the sum of the column widths, borders, and cell-spacing, then all columns are increased in width by an equal amount so they fill the computed width of the table.If the computed width of the table is
auto, then the final width of the table is determined by summing up the column widths, borders, and cell-spacing. This means the table will be only as wide as needed to display its content, just as with traditional HTML tables. Any columns with percentage widths use that percentage as a constraint, but it is a constraint that a user agent does not have to satisfy.
Once the last step is completed, then (and only then) can the user agent actually lay out the table.