Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Column Width

Problem You want to know how a browser chooses the width of a column when you assign different
widths to cells in the same column in different rows.

Solution This design pattern is the algorithm built into each browser that determines the width of a
column. You do not have to do anything to use this pattern.
It is simplest to assign widths only to cells in the first row. However, you may want to assign
different styles with different widths to arbitrary cells in a table, and let a browser figure out
the width of a column.
This design pattern does not apply to fixed tables, because a browser determines column
widths using only the widths of cells in the first row. Content in subsequent rows is
truncated when it exceeds the column width. The following discussion applies only to
nonfixed tables.
A browser assigns a minimum content width to each cell. This is the minimum width
needed to display cell content. On nonfixed tables, a browser will not shrink a column
smaller than this width. For text, the minimum content width is the width of the widest
word in the cell. For a replaced element, such as an image, it is the width of the replaced
element.
A browser assigns a maximum content width to each cell. This is the width of a cell’s content
up to the width of the table’s container. Some design patterns use this width to size or
proportion columns.
A browser downloads the entire table and scans all its rows to determine the following for
each column: width type, maximum width value, minimum content width, and maximum
content width.
A browser uses the following rules to reconcile different types and values:

1. A column defaults to auto width.


2. A fixed width changes the column’s type to fixed width.


3. A percentage width changes the column’s type to percentage width.


4. A larger fixed width replaces a smaller one.


5. A larger percentage width replaces a smaller one.


6. A larger minimum content width replaces a smaller one.


7. A larger maximum content width replaces a smaller one.
   A browser chooses a layout design pattern based on the type of table and the type of each
   column (auto, fixed, or percentage width). The column is sized using the largest width value
   in the column that matches its type.

Location This pattern applies to shrinkwrapped, sized, and stretched tables.

Example The table is 700 pixels wide. The second column in the example is 75 pixels wide, showing
how a fixed-width cell overrides an auto cell in the same column. The third column is 150
pixels wide, showing how a larger fixed-width value (150px) overrides a smaller one (75px).
The fourth column is 70 pixels wide, showing how a percentage-width cell (10%) overrides a
fixed-width cell (150px) in the same column. The fifth column is 350 pixels wide, showing
how a larger percentage width (50%) overrides a smaller one (10%).

Related to All the design patterns in this chapter