border-spacing
Description
The border-spacing property controls the distance
between the borders of adjacent cells when border-collapse is separate;.
| Item | Value |
|---|---|
| Initial value | no value |
| Inherited | yes |
| Version | CSS2 |
| JavaScript syntax | object.style.borderSpacing="5px" |
Syntax and Property Values
border-spacing: non-negative length (s) | inherit
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 |
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.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!-- www . j a v a 2 s . c om-->
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>
The code above generates the following result.
