The rendering of table borders is divided into two categories in CSS2 -
"collapsed" and "separated". This property specifies which border
rendering mode to use. In the collapsed border model, adjacent table
cells share borders. In the separated model, adjacent cells each have
their own distinct borders (the distance between them given by the
'border-spacing' property.)
In the CSS2 collapsed border model, provision is made for resolution of
cases where borders specified for adjacent cells differ and are in conflict:
If any shared border has a component where the 'border' is set
to "hidden" for ANY of the sharing members, the common
border should be unconditionally set to "hidden".
If any shared border has a component where the 'border' is set
to "none", it can be overridden by any other border-sharing
member carrying a renderable 'border' property value. If ALL
border-sharing members specify a value of "none" for a border
component, only then will the border be set to "none".
If a shared border has a 'border-width' contention, (with no
component having a 'border' value of "hidden" of course...),
the largest border-width should be rendered.
If a shared border has a 'border-style' contention, the suggested
priority should be used (decreasing from left to right): "double",
"solid", "dashed", "dotted", "ridge", "outset", "groove", "inset."
If a shared border has a 'border-color' contention, the suggested
priority should be used (decreasing from left to right): Table cell,
table row, row group, column, column group, table.
Allowed Values
inherit
[CSS2|CSS2.1]
[N7|O7|S1.2]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
collapse
[CSS2|CSS2.1]
[IE5|N7|O4|S1.2]
Type: Explicit
Description:
Use the "collapsed borders" rendering model.
separate
[CSS2|CSS2.1]
[IE5|N7|O4|S1.2]
Type: Explicit
Description:
Use the "separated borders" rendering model.
In-Line: <tableSTYLE="border: medium double red; border-collapse: separate;
border-spacing: 10pt 5pt">
Notes
In the "collapsed border" rendering model, the 'border-style' value of
"inset" behaves like "groove", and "outset" behaves like "ridge."
CSS2 specified that the initial value for this property was "collapse".
Because Mozilla and Opera behave such that the initial value is "separate",
CSS2.1 now makes "separate" the official initial value.
Browser Peculiarities
Internet Explorer 5.0: In the "collapsed" table model, borders set
on the TABLE element win out over borders set on individual cells.