CHAPTER 16 ■ TABLE COLUMN LAYOUTShrinkwrapped Columns
Problem You want to shrinkwrap columns to fit the width of their content.
Solution You can shrinkwrap columns by applying table-layout:auto and width:auto to the table
and width:auto to its cells. Since these rules are the default, this happens by default.
The width of each cell expands to its maximum content width, which is the width of a cell’s
content up to the width of the table’s container. The content can expand a table up to the
width of the table’s container. If this happens, the cells are laid out using the Content-
Proportioned Columns design pattern.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:auto; table-layout:auto; }^
CELL_SELECTOR { width:auto; }
Location This pattern applies to shrinkwrapped tables.
Advantages Browsers use this design pattern by default because it is the most adaptable and natural. It
automatically sizes columns and tables to fit their content. It adapts automatically to any
device and display size. This is a very powerful feature that requires a lot of code to
implement in other graphical user interfaces.
Disadvantages A browser determines the layout of columns. Other design patterns allow you to control
column width, to size columns equally, or to size them proportionally.
Tips The only time shrinkwrapped columns can expand a table beyond the width of its container
is when the combined minimum content width of each column is greater than the width of
the container. For example, replaced elements, such as images, tables nested in cells, or text
set to white-space:nowrap can easily expand a shrinkwrapped table beyond the width of
its container. This causes the table to overflow its container.
Example The first table in the example shows how cells can shrinkwrap to fit their content. The
second table shows how wider content expands a table up to the width of its container and
automatically uses the Content-Proportioned Columns design pattern to lay out columns.
Related to Content-Proportioned Columns