CHAPTER 16 ■ TABLE COLUMN LAYOUTFlex Columns
Problem You want to create dynamically sized columns alongside fixed-width or percentage-width
columns. You want these columns to fill in space that is not used by sized or percentage
cells. As a table’s container grows or shrinks, you want flex columns to grow or shrink (i.e.,
to flex with the table).
Solution You can flex the size of one or more columns by applying width:VALUE_OR_PERCENT to the
table and width:auto to its cells. In other words, you can size or stretch a table, assign fixed
widths and percentage width to most cells, and apply auto width to those cells you want to
flex.
When there are multiple flex columns in fixed tables, each one is sized equally. In auto-
layout tables, flex columns are content-proportioned.
Flex columns stretch to fill any space left over after fixed-width and percentage-width
columns are calculated. If there is no remaining width, flex columns collapse or shrinkwrap.
In auto-layout tables, flex columns shrinkwrap to their minimum content width. In fixed
tables, flex columns completely disappear—with the exception of Firefox 6, which will
render the padding of a flex column if allowed to.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; }^
FLEX_CELL_SELECTOR { width:auto; }
FIXED_CELL_SELECTOR { width:VALUE; }
PERCENTAGE_CELL_SELECTOR { width:PERCENT; }
Location This pattern applies to stretched and fixed tables. It does not apply to shrinkwrapped tables
because their auto-width columns shrinkwrap rather than flex. It applies to sized tables, but
this serves no purpose since a sized table does not flex.
Example The first table in the example is 700 pixels wide and has two flex columns, two fixed-width
columns, and one percentage-width column. The fixed-width columns take up 300 pixels,
and the percentage-width column takes up 140 pixels. This leaves 260 pixels for the flex
columns. Since this is a fixed table, both flex columns are sized equally to fit in the
remaining 260 pixels.
The second table shows how flex columns shrink to their minimum content width in auto-
layout tables when the total width of nonflex columns (840 pixels in the example) is larger
than or equal to the table’s width.
The third table shows how flex columns disappear in fixed tables when the total width of
nonflex columns (700 pixels in the example) is larger than or equal to the table’s width.
Related to Mixed Column Layouts