HTML and CSS Reference
In-Depth Information
In most browsers, this produces the result shown in Figure 14-16 . The exceptions are IE6 and IE7, which
don't support border-spacing at all. Also, Safari and Chrome incorrectly double the vertical spacing between
the two <tbody> sections.
Figure 14-16. You can adjust the horizontal and vertical spacing between cells independently
Caution
you can't use the border-spacing property on any element other than a table.
Adjusting Horizontal and Vertical Space Inside Table Cells
If you're wondering what the CSS equivalent of cellpadding is, there isn't one. You just use the ordinary padding
property, which gives you complete control over the padding in every table cell, and you can have different
amounts of padding on each side. It's important to remember that table rows are always as high as the tallest cell;
and columns normally expand to accommodate the widest cell.
To demonstrate how padding works in table cells, the styles in padding_cells.html applies a different amount
of padding to each side like this:
td {
border: #F00 solid 1px;
padding: 5px 10px 20px 15px;
}
However, the second cell in the third row is styled like this:
tr:nth-child(3) > td:nth-child(2) {
padding: 40px;
}
This adds considerably more padding than to other cells. As Figure 14-17 shows, this increases the height
of the entire row, as well as the width of the column. The extra height also affects the top padding in the cells on
either side but does not apply the same value as in the center cell.
 
 
Search WWH ::




Custom Search