CHAPTER 16 ■ TABLE COLUMN LAYOUTEqual Content-Sized Columns
Problem You want to create a compact table with uniformly sized columns. In other words, you want
to automatically shrink a table to its smallest possible width while sizing all columns
equally.
Solution You can use a variation of the Inverse-Proportioned Columns design pattern to set all
columns to the same width while ensuring the width is no larger than necessary to display
the table’s content.
You can do this 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. The key is to apply the same percentage to all cells and to use a percentage that is
the inverse of the number of columns in the table.
A two-column table requires each column to be sized at 50%.
A three-column table requires each column to be sized at 33.5%.
A four-column table requires each column to be sized at 25%.
A five-column table requires each column to be sized at 20%.
A six-column table requires each column to be sized at 16.5%.
A seven-column table requires each column to be sized at 14.1%.
An eight-column table requires each column to be sized at 12.3%.
A nine-column table requires each column to be sized at 11%.
A ten-column table requires each column to be sized at 10%.
Note that some percentages are not exact inverses of the number of columns because the
inexact value works better in some browsers.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:auto; table-layout:auto; }^
CELL_SELECTOR { width:PERCENT; }
Location This pattern applies to shrinkwrapped tables.
Advantages You can automatically shrinkwrap a table and its columns, and at the same time have all
columns be equal width. This scales nicely on all devices, and when a small display shrinks
a table’s container to the width of the table or smaller, a browser automatically switches the
table to the Equal-Sized Columns design pattern.
Disadvantages This design pattern works best only when you have columns containing numbers and short
text. When content is wide enough to stretch a table to the width of its container, a browser
automatically switches to the Equal-Sized Columns design pattern.
Related to Inverse-Proportioned Columns, Equal-Sized Columns