CHAPTER 16 ■ TABLE COLUMN LAYOUTUndersized Columns
Problem You want to create columns that will be the exact width assigned to them. They may
even be undersized, which means a column may be narrower than its content, and its
content may be truncated.
Solution You can fix the size of columns by applying table-layout:fixed and
width:VALUE_OR_PERCENT to the table and width:VALUE_OR_PERCENT to its cells. In other
words, you can size or stretch a fixed table, and assign fixed widths to cells.
A fixed-layout table truncates content in a cell if the content cannot fit within the
column’s assigned width. Contrast this with auto-layout tables, where a browser always
increases the width of a cell to fit its minimum content width. To ensure consistent
behavior in browsers, you can assign overflow:hidden to all table cells.
overflow:hidden is the only overflow setting that is consistently applied by major
browsers to tables.
Pattern^
HTML
| CONTENT |
CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; table-layout:fixed; }^
CELL_SELECTOR { width:VALUE_OR_PERCENT; overflow:hidden; }
Location This pattern applies only to fixed tables.
Advantages This design pattern works best when you need to ensure pixel-perfect precision that
cannot be broken by content. For example, you need to align tabular data with a
background image.
Fixed tables render much faster than auto-layout tables because a browser reads only
the widths assigned to the first row of cells, and it completely ignores the width of
content. This means a browser does not have to wait for the entire table to download,
and it does not have to calculate minimum and maximum content widths.
Disadvantages Fixed tables do not adapt to small displays, such as mobile devices.
Example The example contains two tables. The first is a fixed table showing how it can create
undersized columns. The second is an auto-layout table showing how it cannot create
undersized columns.
Related to Column Width