CHAPTER 16 ■ TABLE COLUMN LAYOUTContent-Proportioned Columns
Problem You want columns to fill the specified width of a table, and you want columns with wider
content to have a wider width than columns with narrower content. In other words, you
want to distribute a table’s width automatically among its columns while keeping the table
stretched or sized, and you want columns to be sized proportionally to the width of their
content.
Solution You can size columns proportionally to the width of their content by applying table-
layout:auto and width:VALUE_OR_PERCENT to the table and width:auto to its cells. In other
words, you size or stretch the table and make cells auto width. A browser automatically
calculates the maximum content width of each column and totals the maximum content
widths of all columns. It then sizes each column based on the percentage of its maximum
content width divided by the total maximum content width of all columns. Thus, it gives
columns with a larger maximum content width a proportionally larger width compared to
cells with a smaller maximum content width.
A shrinkwrapped table cannot expand beyond the width of its container. When content
expands a shrinkwrapped table to the full width of its container, the table behaves as if it
were stretched and turns shrinkwrapped columns into content-proportioned columns.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; table-layout:auto; }^
CELL_SELECTOR { width:auto; }
Location This pattern applies to sized and stretched tables. It also applies to shrinkwrapped tables
when their content stretches them to the width of their containers. It does not apply to fixed
tables.
Advantages Sized and stretched tables are particularly useful when you have multiple tables that you
want to be the same size. This gives a document a consistent look and feel. Stretched tables
have an advantage over sized tables in that they automatically resize to fit smaller displays.
Disadvantages Sized tables do not adapt to small displays, such as mobile devices.
Example In the example, the first table is sized, and its first column is smaller than its second column
because it has less content. Notice that both columns are wider than they would have been
if they were shrinkwrapped. In the second table, both columns have identical content, and
the browser makes them the same size. The third table is shrinkwrapped, but its content
stretches the table to the width of its container. This makes its columns content-
proportioned. Notice how the second column is twice as wide as the first column because
its content is twice as wide.
Related to Shrinkwrapped Columns