语法
border-spacing: length | initial | inherit;
具有一个值的边框间距属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
}
</style>
</head>
<body>
<h2>Example of border-spacing: 20px;</h2>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Li</td>
</tr>
<tr>
<td>Jack</td>
<td>Ma</td>
</tr>
</table>
</body>
</html>
这是另一个具有两个值的示例。
第一个值设置水平间距，第二个值设置垂直间距。
具有两个值的边框间距属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-spacing: 20px 30px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>
现在让我们为上面的表格示例提供一些样式。
例如，让我们添加背景颜色。
它设置元素的背景颜色。
将 border-spacing 属性与 background-color 属性一起使用的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<h1>Example of border-spacing: 20px;</h1>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Peterson</td>
</tr>
<tr>
<td>Maxim</td>
<td>Brown</td>
</tr>
</table>
</body>
</html>
CSS border-spacing 属性值说明
| 值 | 说明 |
|---|---|
| length | 以像素、em等为单位指定单元格之间的距离。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
border-spacing CSS 属性设置相邻表格单元格边框之间的距离。
此属性仅在边框折叠分离时适用。
如果使用折叠边框模型，则此属性将被忽略。
border-spacing 属性适用于使用分隔边框模型执行的 HTML 属性。
它决定了单元格之间的间距，因为由分离边框模型呈现的表格单元格的不同边框是不共享的。
边框间距可以使用一或者两个长度值来定义。
如果给出两个值，第一个设置水平间距，第二个设置垂直间距。
如果只给出一个值，则将水平和垂直间距都设置为指定值。
不允许使用负值。
| 初始值 | 0 |
|---|---|
| 应用于 | 表和内联表元素。 |
| 继承 | 不可继承 |
| 可动画的 | 间距可设置动画。 |
| 版本 | CSS2 |
| DOM 语法 | object.style.borderSpacing=“10px”； |
日期：2020-06-02 22:14:19 来源：oir作者：oir