Styling Tables - Beginning CSS3 - page 328

The table-layout property is supported by all browsers in current use, including IE 6.

exerCise: Fixing Column Widths

in this exercise, you'll fix the width of the cells in the first row of a table. you'll then use a browser's
developer tools to examine the effect of table-layout . The width of one column is deliberately narrow
to demonstrate what happens with fixed-width tables.

Use as your starting point table-layout_begin.html in the ch14 folder. The finished files are table-layout_end.
html and table-layout_ie6.html.

1. load the page into a browser to see how the table is displayed. The styles set the

table width to 500px . The cells in the first row each contain a single number, but
the second row contains more text. because the cells in the first row don't have a
declared width and table-layout hasn't been set, the cells automatically adjust to
accommodate their content, as shown in Figure 14-19 .

Figure 14-19. By default, table cells automatically adjust their width to the size of their content

2. Set the width of each cell in the first row using the :first-child and
:nth-child() pseudo-classes like this:
tr:first-child > td:first-child {
width: 50%;
}
tr:first-child > td:nth-child(2) {
width: 20%;
}
tr:first-child > td:nth-child(3) {
width: 10%;
}
tr:first-child > td:nth-child(4) {
width: 20%;
}

3. Save the page, and test the table again in a modern browser. The columns no longer

expand automatically, but are controlled by the widths assigned to the first row of
cells, as shown in Figure 14-20 .