border-collapse
Specifies how borders between table cells are shared.
Sample Code
table.test { border-collapse: separate;}
table.test1 { border-collapse: collapse;}
Available Values
| Value | Description |
|---|---|
| separate | Each cell has its own individual border. This is the default value. |
| collapse | Adjacent borders are merged into a single shared border. |
Browser Preview
In the samples below, the table element has『border: solid 1px #f00』, and each td element has either『border: solid 1px #00f』or『border: solid 1px #0f0』.
<table style="border-collapse: separate; border: solid 1px #f00; margin: 0 auto;"> <tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr> <tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr> </table>
<table style="border-collapse: collapse; border: solid 1px #f00; margin: 0 auto;"> <tr><td style="border: solid 1px #00f;">This is a td element.</td><td style="border: solid 1px #0f0;">This is a td element.</td></tr> <tr><td style="border: solid 1px #0f0;">This is a td element.</td><td style="border: solid 1px #00f;">This is a td element.</td></tr> </table>
Browser Compatibility
8 ○
7 ○
6 ○
3 and below ×
Android Browser
2.2+ ○
1 and below ×※ Version information is based on MDN.
Notes
Specifies how borders between table cells are shared.
The『border-collapse』property can only be applied to table or inline-table elements.
To adjust the spacing between cells when using『separate』, use the『border-spacing』property.
If you find any errors or copyright issues, please contact us.