CHAPTER 16 ■ TABLE COLUMN LAYOUTSized Columns
Problem You want to assign fixed widths to columns while keeping the table’s width within a minimum or
maximum value.
Solution You can size columns by applying table-layout:auto and width:auto to the table and
width:VALUE to its cells. If the total width of the columns is greater than the width of the
container, the layout changes to the Sized-Proportioned Columns design pattern. I call this the
Maximum-Width Sized Columns design pattern because columns are rendered at the width
you assigned only as long as their total width is less than or equal to the width of the table’s
container. In other words, the container’s width sets the maximum width of the table. Finally,
regardless of the assigned width, columns cannot be smaller than their minimum content width.
You can also size columns by applying table-layout:fixed and width:MIN_WIDTH to the table
and width:VALUE to cells in the first row. If you assign a 1-pixel width to the table, a browser will
expand the table as necessary to fit the fixed width of its cells. There is no maximum width—the
table overflows its container as needed to ensure its columns are sized to their assigned width. If
you assign a larger width to the table than the total width of the columns, the layout changes to
the Sized-Proportioned Columns design pattern. I call this the Minimum-Width Sized
Columns design pattern because columns are rendered at the width you assigned only as long
as their total width is greater than or equal to the width assigned to the table. Finally, minimum
content width has no effect on column width.
Limitations In select versions of webkit browsers (Chrome, Safari), there is a documented bug associated
with table-layout:fixed where the browser will not render padding assigned to the width of a
table cell.
Patterns
Maximum-Width Sized Columns
HTML
| CONTENT |
TABLE_SELECTOR { width:auto; table-layout:auto; }
CELL_SELECTOR { width:VALUE; }Minimum-Width Sized Columns<table> <tr> <td> CONTENT </td> </tr> </table>TABLE_SELECTOR { width:MIN_WIDTH; table-layout:fixed; }
CELL_SELECTOR { width:VALUE; }CSS
HTML
CSS
Location This pattern applies to shrinkwrapped or fixed tables.
Example The columns in all four tables are sized the same. The first column is 200 pixels, and the second
is 300 pixels. The difference is the type of table (fixed or shrinkwrapped) and the table’s width or
its container’s width.
Related to Sized-Proportioned Columns