CHAPTER 16 ■ TABLE COLUMN LAYOUTPercentage-Proportioned Columns
Problem You want to size columns as a percentage of a table’s width. In other words, you want
columns to fill the specified width of a table, and you want to distribute a table’s width
among its columns using percentages. When the total column percentage falls short of
100%, you want a browser to scale the percentages to equal 100%.
Solution You can size columns as a percentage of a table’s width by applying
width:VALUE_OR_PERCENT to the table and width:PERCENT to its cells. In other words, you
size or stretch the table and assign percentages to cells. The table can be fixed layout or auto
layout.
When the total percentage of all columns is less than 100%, a browser scales percents to
equal 100%. In the example, the two columns in the second table are both assigned to 20%,
which totals 40%. These percents are scaled to 100%, laying out the table as if each column
were assigned to 50%.
A browser works from left to right when sizing percentage-width columns. When a browser
encounters a percentage that increases the total beyond 100%, it truncates the percentage
assigned to that column so the total equals 100% and it treats any remaining columns as
width:auto. In the example, the two columns of the third table are both set to 80%, which
totals 160%. The percentage assigned to the second table is reduced to 20% so that the
columns total 100%. In the last table of the example, the third column occurs after the
percentage totals 100%. This causes a browser to shrinkwrap the third column and to scale
the previous columns to fit in the remaining space.
In fixed tables, when percentages total 100% or less, percentages work the same as they
work in sized and shrinkwrapped tables. When they exceed 100%, the results vary from
browser to browser.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; }^
CELL_SELECTOR { width:PERCENT; }
Location This pattern applies to sized, stretched, and fixed tables.
Advantages Percentages are an intuitive, self-documenting way to proportion columns.
Disadvantages Size-proportioned columns are more forgiving because they do not have to add up to 100%.
Tip It is best not to allow column percentages to exceed 100% for any type of table. If you want
some cells to be shrinkwrapped and others to be percentage proportioned, your intention is
clearer and the result more reliable when you assign width:auto to shrinkwrapped cells and
width:PERCENT to percentage-proportioned cells.
Related to Size-Proportioned Columns