Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Inverse-Proportioned Columns

Problem You want to size a table in proportion to its column with the widest content, and you want
its columns to be percentage-proportioned within this width. For example, you want a table
to be automatically sized at twice the width of the column containing the widest content.

Solution You can size a table in proportion to the column with the widest content by assigning
table-layout:auto and width:auto to the table and width:PERCENT to its cells. In other
words, you shrinkwrap the table and assign percentages to cells.
A browser calculates the table width by multiplying the maximum content width by the
inverse of the percentage assigned to each column. The largest resulting width becomes the
width of the table. Once the table width is calculated, a browser percentage-proportions
each column to fit into the table’s width.
This design pattern provided by browsers is too unintuitive to be useful as it stands. But it
can be used to create equal-sized columns based on the content width, which is the basis of
the next design pattern, Equal Content-Sized Columns. And this is a very useful design
pattern.

Pattern^

HTML

CSS TABLE_SELECTOR { width:auto; table-layout:auto; }^
CELL_SELECTOR { width:PERCENT; }

Location This pattern applies to shrinkwrapped tables.

Limitations This pattern works only when the total of all columns is less than or equal to 100%.

Example In the example, the first table has one column assigned to width:20%. A browser multiplies
the content’s width, which is 40 pixels, by the inverse of 20%, which is 5. This sizes the table
at 200 pixels plus cell spacing, padding, and borders around each cell. The second table
shows that the table width is wide enough to hold five equal-sized columns shrinkwrapped
to their content. The third table shows that columns with different percentages are
percentage-proportioned within the calculated width of the table.
Also notice in the example how smaller percentages and wider content make wider tables.
For example, given a content width of 40 pixels, the first column of the third table with a
width of 20% suggests a table width of 200 pixels (540). The second column with a width of
50% suggests a table width of 80 pixels (240). The first column wins because it suggests a
larger table width. If the content width of the second column were wider, say 150 pixels, it
would win and size the table at 300 pixels (2150).

Related to Equal Content-Sized Columns