CSS border-spacing 语法
在 CSS 中，border-spacing 属性用于定义表格单元格之间的间距。
语法：
border-spacing: 数值;说明：
border-spacing 的取值可以使用一个或两个长度值。
- 一个长度值：如果只指定一个长度值，此时表示同时用于设置水平和垂直方向的间距。
- 两个长度值：如果指定两个长度值，第一个值用于设置水平方向的间距，第二个值用于设置垂直方向的间距。
注意:
- border-spacing 属性是用于 table 元素的。
- border-spacing 属性初始值为 0。也就是说在默认情况下，单元格边框之间是没有间隔的，它们会紧密相邻。
- border-spacing 属性只在 border-collapse: separate; 时才有效。如果 border-collapse 设置为 collapse，此时 border-spacing 会被忽略。
CSS border-spacing 摘要
| 属于 | CSS 表格 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS border-spacing 示例
接下来，我们通过几个简单的例子来讲解一下 CSS border-spacing 属性是如何使用的。
示例 1：border-spacing 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table, th, td { border:1px solid gray; }
table { border-spacing: 10px; }
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>页面效果如下图所示。
分析：
border-spacing: 10px; 表示定义单元格之间的间距为 10px。
示例 2：border-spacing 只在 border-collapse: separate; 时有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table, th, td {
border:1px solid gray;
}
table {
border-collapse: collapse; /* 边框折叠 */
border-spacing: 10px; /* 设置了间距，但无效 */
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们将 border-collapse 设置为 collapse。尽管设置了 border-spacing: 10px;，但由于边框是折叠的，单元格之间不会有间隔，因此 border-spacing 的设置无效。
