在CSS中，border-collapse和border-spacing是专门用于控制表格边框表现的两个属性，二者存在互斥的使用规则，合理搭配可以让表格呈现不同的视觉效果。
border-collapse属性介绍
border-collapse属性用于设置表格的边框是否被合并为单一的边框，还是分开显示。该属性只能应用在table元素或者display属性值为table、inline-table的元素上。
可选取值
- separate：默认值，表格边框分开显示，每个单元格拥有独立的边框，此时border-spacing属性会生效。
- collapse：表格边框合并为单一的边框，相邻单元格的边框会重叠在一起，此时border-spacing属性不会生效。
使用示例
当设置border-collapse为separate时，表格单元格边框分开，代码如下：
/* 分开边框的表格样式 */
.separate-table {
border-collapse: separate;
/* 设置单元格边框间距，后面会详细介绍border-spacing */
border-spacing: 10px;
width: 300px;
}
.separate-table td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
对应的HTML结构如下：
<table class="separate-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
如果将border-collapse改为collapse，相邻单元格的边框会合并，代码如下：
/* 合并边框的表格样式 */
.collapse-table {
border-collapse: collapse;
width: 300px;
}
.collapse-table td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
border-spacing属性介绍
border-spacing属性用于设置相邻单元格边框之间的距离，只有当border-collapse的取值为separate时，该属性才会生效。如果border-collapse为collapse，设置border-spacing不会产生任何效果。
可选取值
- 长度值：可以设置一个长度值，此时水平和垂直方向的间距都是这个值；也可以设置两个长度值，第一个值代表水平间距，第二个值代表垂直间距。
- inherit：从父元素继承border-spacing属性的值。
使用示例
设置水平间距10px，垂直间距20px的代码如下：
.spacing-table {
border-collapse: separate;
/* 水平间距10px，垂直间距20px */
border-spacing: 10px 20px;
width: 300px;
}
.spacing-table td {
border: 1px solid #666;
padding: 8px;
text-align: center;
}
对应的HTML结构和之前的表格结构一致，最终单元格之间会出现水平10px、垂直20px的间距。
两个属性的使用注意事项
- border-collapse和border-spacing存在互斥关系，只要border-collapse设置为collapse，不管border-spacing设置什么值都不会生效。
- border-spacing属性必须应用在table元素上，直接设置在td、th等单元格元素上是没有效果的。
- 如果表格设置了border-collapse: collapse，再给单元格设置border-radius圆角属性，圆角效果通常不会生效，因为边框已经合并，无法呈现圆角效果。
- 在旧版本的浏览器中，部分属性可能存在兼容性问题，实际使用时如果需要兼容旧浏览器，建议做简单的兼容性测试。
实际场景选择建议
如果需要表格边框线条更粗、更统一，比如常见的后台数据表格，建议使用border-collapse: collapse，这样边框不会出现双重线条的问题。
如果需要表格单元格之间有明显的间隔，比如卡片式的表格布局，建议使用border-collapse: separate配合border-spacing设置合适的间距，同时可以给单元格设置背景色，让间隔更明显。
下面是一个完整的对比示例，展示两种属性取值下的表格差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格属性对比</title>
<style>
.table-demo {
width: 400px;
margin: 20px auto;
}
.collapse-demo {
border-collapse: collapse;
}
.collapse-demo td {
border: 2px solid #ff0000;
padding: 10px;
text-align: center;
}
.separate-demo {
border-collapse: separate;
border-spacing: 15px;
}
.separate-demo td {
border: 2px solid #00ff00;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-demo">
<h3>合并边框效果</h3>
<table class="collapse-demo">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
<td>A4</td>
</tr>
</table>
</div>
<div class="table-demo">
<h3>分开边框效果</h3>
<table class="separate-demo">
<tr>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>B3</td>
<td>B4</td>
</tr>
</table>
</div>
</body>
</html>
border-collapseborder-spacingCSS表格样式表格边框修改时间：2026-07-21 07:36:12