The border-collapse property sets how table borders display.
Possible values are separate and collapse.
By default, table borders are separate.
A table with separate borders.
| Fullname | Age |
|---|---|
| Susan Doe | 26 |
| Vivian Grim | 24 |
| Kevin John | 35 |
<style>
.table-border-separate,
.table-border-separate td,
.table-border-separate th {
border: 1px solid #302ea3;
padding: 10px;
}
.table-border-separate {
border-collapse: separate;
}
</style>
<table class="table-border-separate">
<tr>
<th>Fullname</th>
<th>Age</th>
</tr>
<tr>
<td>Susan Doe</td>
<td>26</td>
</tr>
<tr>
<td>Vivian Grim</td>
<td>24</td>
</tr>
<tr>
<td>Kevin John</td>
<td>35</td>
</tr>
</table>
border-collapse: separate | collapse | initial | inherit;
| Value | Description |
|---|---|
| separate | Default. Separated borders and each cell having its own border. |
| collapse | Collapses border into a single border when possible (border-spacing and empty-cells properties have no effect) |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-collapse values.
| Fullname | Age |
|---|---|
| Susan Doe | 26 |
| Vivian Grim | 24 |
| Kevin John | 35 |
<style>
.table-border-collapse,
.table-border-collapse td,
.table-border-collapse th {
border: 1px solid #302ea3;
padding: 10px;
}
.table-border-collapse {
border-collapse: collapse;
}
</style>
<table class="table-border-collapse">
<tr>
<th>Fullname</th>
<th>Age</th>
</tr>
<tr>
<td>Susan Doe</td>
<td>26</td>
</tr>
<tr>
<td>Vivian Grim</td>
<td>24</td>
</tr>
<tr>
<td>Kevin John</td>
<td>35</td>
</tr>
</table>
This table shows when border-collapse support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
5.0 | Jul 2000 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.2 | Feb 2004 |
