在CSS中设置表格边框间的距离，核心使用的是border-spacing属性，这个属性专门用于定义表格中相邻单元格边框之间的间隔，仅对分离边框模型的表格生效。
border-spacing属性的基本语法
border-spacing属性的语法格式如下：
/* 同时设置水平和垂直方向的距离，单位可以是px、em、rem等 */ border-spacing: 10px; /* 分别设置水平方向和垂直方向的距离 */ border-spacing: 10px 20px;
该属性有两个取值规则：如果只设置一个值，那么这个值会同时作用于水平方向和垂直方向的边框间距；如果设置两个值，第一个值对应水平方向的间距，第二个值对应垂直方向的间距。
使用border-spacing的前提条件
border-spacing属性只对border-collapse属性值为separate的表格生效，因为border-collapse: collapse会让表格边框合并，不存在边框间距的概念。默认情况下，表格的border-collapse值就是separate，所以如果没有手动设置合并边框，直接使用border-spacing即可生效。
基础使用示例
下面是一个简单的表格示例，展示border-spacing的基础用法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.demo-table {
border: 1px solid #333;
/* 设置水平和垂直方向边框间距都是15px */
border-spacing: 15px;
}
.demo-table td {
border: 1px solid #666;
padding: 8px 12px;
}
</style>
</head>
<body>
<table class="demo-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
上述代码中，表格的相邻单元格边框之间会出现15px的间距，水平和垂直方向都是这个数值。
分别设置水平垂直间距的示例
如果需要水平和垂直方向的间距不同，可以设置两个值：
/* 水平方向间距10px，垂直方向间距20px */
.special-table {
border-collapse: separate;
border-spacing: 10px 20px;
}
此时表格单元格左右之间的间距是10px，上下之间的间距是20px。
注意事项
- border-spacing属性不能被单元格、行、行组等表格子元素继承，只能设置在table元素上。
- 如果表格设置了
border-collapse: collapse，再设置border-spacing不会生效，浏览器会忽略这个属性值。 - border-spacing的取值不能为负数，设置负数会被浏览器视为无效值，使用默认值0。
兼容性说明
border-spacing属性属于CSS2.1规范的内容，目前所有主流浏览器都支持这个属性，包括Chrome、Firefox、Safari、Edge等，不需要添加浏览器前缀即可正常使用。
CSSborder-spacing表格边框table修改时间：2026-07-05 10:57:19