CHAPTER 16 ■ TABLE COLUMN LAYOUTSize-Proportioned Columns
Problem You want columns to fill the specified width of a table, and you want columns with larger
width to be proportionally wider than columns with smaller width. In other words, you
want to distribute a table’s width among its columns proportionally to each column’s
assigned width.
Solution You can size columns proportionally to their width by applying table-layout:auto and
width:VALUE_OR_PERCENT to the table and width:VALUE to its cells. In other words, you size
or stretch the table and assign fixed widths to cells.
When all column widths, padding, borders, and cell spacing add up to the width you assign
to the table, a browser renders each column at the exact width you assigned. Since this is
tedious to calculate and error-prone, it is easy for column widths to add up to more or less
than the table’s width. When this happens, a browser renders a column proportionally to
the widths you assigned to other columns.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; table-layout:auto; }^
CELL_SELECTOR { width:VALUE; }
Location This pattern applies to sized and stretched tables.
This pattern applies to a shrinkwrapped table when the total width of all its columns is
greater than the width of its container. This stretches it to the sides of its container, causing
it to behave like a stretched table.
This pattern applies to a fixed table when the total width of all its columns is less than the
width assigned to the table. In contrast, if the total width of the columns is greater than the
width of a fixed table, the width of the table expands, and the columns are not size-
proportioned.
Advantages Size-proportioned columns give you the ability to specify the relative size of each column in
relation to the other columns while preserving the width you assigned to the table. Size-
proportioned columns are most common in stretched and sized tables where you want
multiple tables to have a uniform width and you want to tweak the width of individual
columns.
Tips Since the widths you assign to columns are proportional, you can make widths huge or tiny
because only the ratio between widths matters.
Example Notice how the columns in the shrinkwrapped table had to be set to a width large enough to
stretch the table to the width of its container. This allows the columns to be size-
proportioned. Notice how the total width of the columns in the fixed table is much smaller
than the width of the table. This allows the fixed table to be size-proportioned.
Related to Sized Columns