
The CSS border-spacing property settles the distance between the borders of adjacent cells. The CSS border-spacing property works only when the CSS border-collapse property value is set to separate.
Demo:
Click the “Try it” button to change the border-spacing property of the TABLE element to 10px:
Name | Surname |
---|---|
John | Black |
Matt | Green |
Adam | Brown |
Syntax:
border-spacing: length;
length – defines the distance between the borders of adjacent cells (px, cm…).
Note:
You can define two values:
1) if one value is defined, it specifies both the horizontal and vertical spacing between cells,
2) if two values are specified, the first settles the horizontal spacing, and the second settles the vertical spacing.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #333;
}
#table1 {
border-collapse: separate;
border-spacing: 15px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px 50px;
}
</style>
</head>
<body>
<h4>border-spacing: 10px;</h4>
<table id="table1">
<tr>
<th>Firstname</th>
<th>Surname</th>
</tr>
<tr>
<td>Adam</td>
<td>Brown</td>
</tr>
<tr>
<td>John</td>
<td>White</td>
</tr>
</table>
<h4>border-spacing: 15px 30px;</h4>
<table id="table2">
<tr>
<th>Firstname</th>
<th>Surname</th>
</tr>
<tr>
<td>Adam</td>
<td>Brown</td>
</tr>
<tr>
<td>John</td>
<td>White</td>
</tr>
</table>
</body>
</html>
Output:
border-spacing: 10px;
Firstname | Surname |
---|---|
Adam | Brown |
John | White |
border-spacing: 10px 30px;
Firstname | Surname |
---|---|
Adam | Brown |
John | White |
Enjoy coding!
Read also: