CSS Property border-spacing
The border-spacing property controls the distance
between the borders of adjacent cells when border-collapse is separate;.
Summary
| Item | Value |
|---|---|
| Initial value | no value |
| Inherited | yes |
| Version | CSS2 |
| JavaScript syntax | object.style.borderSpacing="5px" |
CSS Syntax
border-spacing: non-negative length (s) | inherit
If one length value is provided, like 2px, it sets both the horizontal and vertical distance.
If two length values are provided, like 2px 3px,
the first sets the horizontal
distance and the second sets the vertical distance.
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| length length | Sets the distance in px, cm, etc. Negative values are not allowed. |
| inherit | Inherit the border-spacing property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
border-spacing |
Yes | 8.0 | Yes | Yes | Yes |
Example
An example showing how to use border-spacing CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!-- w ww.jav a 2 s. c o m-->
border: 1px solid rgb(200, 200, 200);
caption-side: bottom;
width: 100%;
table-layout: fixed;
border-spacing: 15px;
}
th {
background: lightyellow;
}
th, td {
border: 1px solid rgb(200, 200, 200);
padding: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<table>
<caption>
My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Column 1</th><th>Colunm 2</th><th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> R</td><td> A</td><td> 1965</td>
</tr>
<tr>
<td> B</td><td> V</td><td> 1967</td>
</tr>
<tr>
<td> M</td><td> T</td><td> 1995</td>
</tr>
</tbody>
</table>
</body>
</html>