| Inherited | Initial | Version |
|---|---|---|
| Yes | separate |
CSS2, 2.1 |
| IE8+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Buggy | Full | Full | Full |
Syntax
Description
This property specifies the
border model that’s to be used for a table or an inline table—that is, an
element whose display property has one of the values
table or inline-table.
See Table Formatting for details about the table border models.
Example
This style rule makes the table element
with the ID "results" use the collapsing borders
model:
#results {
border-collapse: collapse;
}Value
collapse- selects the collapsing borders model (the
border-spacingandempty-cellsproperties will be ignored) separate- selects the separated borders model (the
border-spacingandempty-cellsproperties will be taken into account)
Note that the initial value was collapse in
CSS2, but it was changed to separate in
CSS2.1.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Buggy | Buggy | Buggy | Full | Buggy | Buggy | Buggy | Buggy | Buggy | Full | Full | Full | Full | Full | Full | Full | Full |
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
In Internet Explorer
for Windows versions up to and including 7 the value
collapse will not override a
cellspacing attribute value.
Firefox up to
and including version 3.5 when using the collapse
border model, the displayed border will come out looking like the
margin-top and margin-left values
were set to 1 pixel less than they should be. This results in the table
not aligning flush with other elements.
User-contributed notes
- ID:
- #1
- Date:
- Wed, 27 Feb 2008 07:05:53 GMT
Firefoxes handling of collapse appears to be buggy...
When you collapse borders within a table, the displayed border will come out looking like the margin-top and margin-left were set to 1 less than they should be. While not a big deal it's rather off-putting when it doesn't align flush properly with other elements...
