HTML and CSS Reference
In-Depth Information
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.
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%;
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 .
Search WWH ::

Custom Search