Web Design in a Nutshell, 3rd Edition

Fixed-Width Layout

The fixed value for table-layout tells the browser or other user agent to calculate the size of the table using the “fixed” algorithm. This method requires the least work of the user agent because the table width is determined by the width values of the table, columns, and cells within the table.

First, the user agent takes the widths of column elements that are set to a specific width (not auto). Then it looks at the cells in the first row of the table. Cells with specific width values (not auto) set the width for their columns. Any remaining columns that have the width set to auto are sized so their widths are roughly equal to fill the remaining space in the table.

The final width of the table is the sum of the column widths or the table element’s width value, whichever is greater.

The important aspect of this model is that only width values provided for cells in the first row of the table apply. Therefore, if the top cell in a table is set to 200 pixels and another cell farther down in the same column is set to 350 pixels, the column will be 200 pixels wide. The setting in the lower row is simply ignored in the fixed layout model.

The advantage of the fixed-width layout is that it’s much faster than the automatic method. Because it depends on declared width values for the table and columns, and because it only takes into consideration the first row of cells, there is no need to parse and calculate sizes for the entire table content to arrive at a size calculation. ...