HTML and CSS Reference
In-Depth Information
Figure 14-15.
WebKit-based browsers don't handle the visibility property correctly on tables
IE 8 doesn't hide the row because it doesn't support the
:nth-child()
pseudo-class, but it works correctly
if you use an ID selector instead. Interestingly, when you use an ID selector, IE 6 and IE 7 handle the
visibility
property more gracefully than Chrome and Safari. They simply ignore it, and display the row as normal.
Adjusting the Space Between Table Cells
The CSS equivalent of the HTML
cellspacing
attribute is
border-spacing
, which is mutually exclusive with
border-collapse
. If you want to control the spacing between cells,
border-collapse
must be set to
separate
or
omitted altogether (it's the default way of displaying tables).
Unlike
cellspacing
, which adds the same amount of space around all sides of each cell,
border-spacing
lets you specify different values for horizontal and vertical spacing. If you supply one value, it applies to both axes.
However, if you supply two values, the first is applied to horizontal spacing, and the second to vertical spacing.
■
Setting
border-spacing
to
0
is not the same as setting
border-collapse
to
collapse
. The spacing
between the cells is eliminated, but the borders don't merge.
Tip
The style for the table in border-spacing.html looks like this:
table {
border: #000 solid 5px;
border-spacing: 30px 10px;
}
