CSS border-collapse Property
The border-collapse property is used to set either collapsed or separated table borders.
This property can only be applied to 'table' and 'inline-table' elements.
Possible Values
- collapse - borders are collapsed.
- separate - borders are separate - this is the default method in HTML table display.
- inherit - the value is inherited from the parent element.
Below are a couple of tables illustrating the border-collapse property. In both tables the <table>
element has a blue background-color and the <td> elements have a red background-color.
The only difference in the CSS is that the top table has a border-collapse value of collapse
and the lower table has border-collapse value of separate. As you can see when the borders are collapsed the
table background-color is hidden by the cells as their borders are joined. When the borders are separate
(the default value if not specified) the background-color of the table is visible between the cells.
table.classname{border-collapse: collapse;}
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
table.classname{border-collapse: separate;}
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |