border-spacing sets the table cell border spacing.
This property is used for table cells only.
A table border border-spacing.
Table border will be displayed away the table cells border.
| Fullname | Age |
|---|---|
| Charice Mckinley | 26 |
| Penelope Gray | 32 |
<style>
.table-separate-2,
.table-separate-2 td,
.table-separate-2 th {
border: 1px solid #6266f1;
padding: 10px;
}
.table-separate-2 {
border-collapse: separate;
border-spacing: 15px;
}
</style>
<table class="table-separate-2">
<tr>
<th>Fullname</th>
<th>Age</th>
</tr>
<tr>
<td>Charice Mckinley</td>
<td>26</td>
</tr>
<tr>
<td>Penelope Gray</td>
<td>32</td>
</tr>
</table>
The border-spacing property sets adjacent cells border distance.
This property is used for table cells.
This property only works when border-collapse is set to separate.
border-spacing: length | initial | inherit;
| Value | Description |
|---|---|
| length length |
Distance of borders in px, cm, and other CSS units. Negative values are not accepted. If only one value is specified, the horizontal and vertical spacing will be adjusted. Otherwise, the first value will be the horizontal spacing, and the second value will be the vertical spacing. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-spacing values.
| Fullname | Age |
|---|---|
| Charice Mckinley | 26 |
| Penelope Gray | 32 |
<style>
.border-spacing,
.border-spacing td,
.border-spacing th {
border: 1px solid #6266f1;
padding: 10px;
}
.border-spacing {
border-collapse: separate;
border-spacing: initial;
}
</style>
<table class="border-spacing">
<tr>
<th>Fullname</th>
<th>Age</th>
</tr>
<tr>
<td>Charice Mckinley</td>
<td>26</td>
</tr>
<tr>
<td>Penelope Gray</td>
<td>32</td>
</tr>
</table>
This table shows when border-spacing support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
8.0 | Mar 2009 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
