border-spacing: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The border-spacing property specifies the spacing between the borders of adjacent cells.

You can use this property when the "separate" value is set to the border-collapse property.

This property can apply to the TABLE element.


table {
border: 2px #000000 solid;
border-spacing: 10px;
}
Property Value Explanation
border-spacing length the distance of spacing
  • border-spacing: 5px; : [all sides] spacing
  • border-spacing: 5px 10px; : [left, right] [top, bottom] spacing

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

table {
border: 2px #2b2b2b solid;
border-collapse: separate;
width: 250px;
margin-bottom: 20px;
}
td, th {
border: 2px #2b2b2b solid;
}

#example1 {
border-spacing: 5px;
}
#example2 {
border-spacing: 30px 5px;
}

</style>

</head>
<body>

<table>
<tr>
<th colspan="2">The default spacing</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

<table id="example1">
<tr>
<th colspan="2">[The spacing on all sides:5px]</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

<table id="example2">
<tr>
<th colspan="2">[left,right:30px] [top,bottom:5px]</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

</body>
</html>
Output
The default spacing
Cell A Cell B
[The spacing on all sides:5px]
Cell A Cell B
[left,right:30px] [top,bottom:5px]
Cell A Cell B