Styling Tables - Beginning CSS3 - page 331

instead of an ellipsis, you could break the long words with word-wrap: break-word (see “breaking Overflow
Text” in Chapter 4 ). The draft CSS3 Text module also proposes a hyphens property that can be set to auto to
automate hyphenation, but at the time of this writing, support is still experimental. However, the main focus
of this exercise is not on dealing with overflow text. instead, it's designed to show that fixed column widths
are not affected by the size of their content. When using table-layout: fixed , you need to make sure your
columns are wide enough.

To learn more about table and column widths, continue this exercise by adding padding to the style rule for
the table cells, and then checking the table width with the browser's developer tools. Also increase the width
of the table cells' right border. in both cases, the table width remains unchanged. Unlike the ordinary box
model, padding and borders are included inside the width of table elements.

Older browsers don't understand the :nth-child() pseudo-class. if you need to use table-layout: fixed
with iE 8 or older versions of internet Explorer, add the width attribute to the opening tag of each table cell in
the first row. you can examine the code in table-layout_ie6.html in the ch14 folder. As the filename suggests,
fixed table layout works even in iE 6.

■ The preceding exercise used child combinators in step 2 only to demonstrate that the cells in the first row
control column widths. you can achieve the same effect with just td:first-child , td:nth-child(2) , and so on.

Tip

Adding Scrollbars to Table Cells
Tables are designed for the presentation of data, so it should rarely, if ever, be necessary to add scrollbars to a
table cell. However, as noted in the preceding exercise, setting the overflow property to auto doesn't work on
some browsers. In the event that you need to add scrollbars to a table cell, nest a <div> inside the table cell and
set the overflow property of the <div> to auto . It's the content of the table cell that needs to scroll, not the table
cell itself.

Controlling the Horizontal and Vertical Alignment of Table Cells
By default, browsers align the content of table cells on the left and vertically in the middle. To control the
horizontal alignment, use the text-align property. When used with table cells, it takes exactly the same values
as for text, namely:
left
center
right
justify
Not surprisingly, you control the vertical alignment inside table cells with the vertical-align property.
However, when used with table cells, vertical-align accepts only the following values:
top
middle
bottom
baseline