border-collapse (CSS property)

Spec
Inherited Initial Version
Yes separate CSS2, 2.1
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Buggy Full Full Full

Syntax

border-collapse: { collapse | separate | inherit } ;

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-spacing and empty-cells properties will be ignored)
separate
selects the separated borders model (the border-spacing and empty-cells properties 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
Contributed:
by JuhaniC
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...

Related Products