CHAPTER 16 ■ TABLE COLUMN LAYOUTMixed Column Layouts
Problem You want to use a mixture of columns in a table. For example, you want some columns to
have a fixed width, some to be a percentage of the table’s width, and some to fill in the
remaining space.
Solution This design pattern is the algorithm built into each browser that prioritizes how much width
to give different types of columns when the table is not wide enough for all its columns to
fit.
In a shrinkwrapped, sized, or stretched table, percentage-width columns have highest
priority followed by fixed-width and auto-width columns. In other words, auto-width
columns are shrunk to the minimum width of their content to make room for other
columns. If there is still not enough room, fixed-width columns are shrunk to the minimum
width of their content. Percentage-width columns are percentage-proportioned in the
remaining space. If there is space left over for fixed-width columns, they are size-
proportioned to fill the remaining space.
In a fixed table, fixed-width columns have highest priority followed by percentage-width
and auto-width columns. In other words, auto-width columns are collapsed as needed to
make room for other columns—they completely disappear. If there is still not enough room
for all the columns, percentage-width columns are collapsed to make room—they
completely disappear. Fixed-width cells are displayed at their assigned width—even if it
increases the width of the table beyond its specified width. If there is space left over for
percentage-width columns, they are percentage-proportioned to fill the remaining space.
Location This pattern applies to shrinkwrapped, stretched, and fixed tables that are stretched. This is
because a browser resizes them automatically to fit their content and to fit large or small
displays. In this situation, you may want some columns to be a fixed width, some to be a
percentage of the table’s width, some to shrinkwrap, or some to flex to fill in the remaining
width.
There is no need to mix columns in sized tables, because you already know their width, and
you can simply use fixed-width columns.
Firefox 6 will render the padding of flex columns on fixed tables.
Example The first table in the example is a stretched table with mixed columns that do not exceed the
width of the table. Notice how the auto-width column flexes to take up the extra space. The
remaining tables have columns with a combined width that exceeds the width of the table.
Notice in the second table how the percentage-width columns are fully sized to their
assigned percentages, the auto-width column is forced down to the minimum width of its
content, and the fixed-width columns are size-proportioned to fit the remaining space. The
third table shows how large percentage-width columns can force fixed-width and auto-
width columns to shrink to their minimum content width. The fourth table is identical to
the third table, except it is fixed. Notice how the fixed-width columns in this fixed table have
completely removed the percentage-width and auto-width columns!
Related to Flex Columns