CSS border-collapse Property

Set the CSS border-collapse model for two tables:

#table1 {
border-collapse: separate;
}#table2 {
border-collapse: collapse;
}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Default value: separate
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.borderCollapse=”collapse” Try it
CSS Syntax
border-collapse: separate|collapse|initial|inherit;
Property Values
Value Description Code
separate Borders are separated; each cell will display its own borders. This is default. table#myTable {
border-collapse:separate;
}
collapse Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) table#myTable {
border-collapse:collapse ;
}
initial Sets this property to its default value. Read about initial table#myTable {
border-collapse:initial;
}
inherit Inherits this property from its parent element. Read about inherit
Example

When using “border-collapse: separate”, the border-spacing property can be used to set the space between the cells:

#table1 {
border-collapse: separate;
border-spacing: 10px;
}

Try it Yourself »

Example

When using “border-collapse: collapse”, the cell that appears first in the code will “win”:

table, td, th {
border: 3px solid red;
}#table1 {
border-collapse: collapse;
border-color: blue;
}

Try it Yourself »