HTML and CSS Reference
In-Depth Information
Figure 5-32
Separate and collapsed borders
separate borders
collapsed borders
To determine whether to use the separate or collapsed borders model, you apply
the style
border-collapse:
type
;
to the
table
element, where
type
is either
separate
(the default) or
collapse
. One of
the key differences between the separate and collapsed borders models is that under the
separate borders model, you can apply borders only to the table itself or to table cells.
Under the collapsed borders model, any table object can have a border, including table
rows, row groups, columns, and column groups. If the separate borders model is used,
you can specify the distance between the borders by applying the style
border-spacing:
value
;
to the
table
element, where
value
is the space between the borders in one of the CSS
units of measure. For example, the following style specifi es that all borders within the
table should be separated by a distance of 10 pixels:
table {
border-collapse: separate;
border-spacing: 10px;
}
The separate borders model, therefore, has the same effect as the HTML
cellspacing
attribute in providing additional space between table cells.
In the collapsed borders model, there is no space between borders; in fact, the adja-
cent borders are merged together to form a single line. It's important to understand that
the borders are not simply moved together, but rather they are combined into a single
border. For example, if two adjacent 1-pixel-wide borders are collapsed together, the
resulting border is not 2 pixels wide, but only 1 pixel wide.
The situation is more complicated when adjacent borders have different widths, styles,
or colors. How would you merge a double red border and a solid blue border into a
single border of only one color and style? Those kinds of differences must be reconciled
before the two borders can be merged. CSS employs the following fi ve rules, listed in
decreasing order of importance, to determine the style of a collapsed border:
1.
If either border has a border style of
hidden
, the collapsed border is hidden.
2.
A border style of
none
is overridden by any other border style.
3.
If neither border is hidden, the style of the wider border takes priority over the
narrower.
