css的border-collapse属性是表格布局中控制边框显示方式的核心属性，它直接影响表格盒模型的边框渲染逻辑，决定相邻单元格的边框是合并还是分离。理解它的使用方式能有效解决表格边框间隙、重叠等常见问题，让表格样式更符合设计需求。
border-collapse的基本语法
border-collapse是专门作用于table元素的css属性，不能应用于其他类型的元素，其基本语法格式如下：
/* 作用于表格元素 */
table {
border-collapse: 取值;
}
该属性只有两个常用有效取值，分别是separate和collapse，默认值为separate。
两个取值的区别与表格盒模型表现
separate取值（默认值）
当border-collapse取值为separate时，表格采用分离边框模型，每个单元格都拥有独立的边框，相邻单元格的边框之间会有间隙，间隙的大小由border-spacing属性控制。此时表格盒模型中，每个单元格的边框、内边距、内容区域都独立计算，表格的总宽度是各个单元格宽度、边框宽度、间隙宽度的总和。
下面是一个使用separate取值的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.separate-table {
border-collapse: separate;
border-spacing: 10px; /* 设置单元格边框之间的间隙为10px */
width: 300px;
}
.separate-table td {
border: 2px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table class="separate-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
collapse取值
当border-collapse取值为collapse时，表格采用合并边框模型，相邻单元格的边框会合并为一条单一的边框，不会出现间隙。此时表格盒模型中，相邻边框的优先级遵循一定规则：首先看边框宽度，宽的边框优先；宽度相同的话，颜色优先级为cell > row > row group > column > column group > table；如果以上都相同，实线边框优先于虚线边框。
对应的示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.collapse-table {
border-collapse: collapse;
width: 300px;
}
.collapse-table td {
border: 2px solid #333;
padding: 8px;
text-align: center;
}
/* 单独设置第一列边框更宽，验证合并规则 */
.collapse-table td:first-child {
border-right: 4px solid #ff0000;
}
</style>
</head>
<body>
<table class="collapse-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
使用border-collapse的常见注意事项
- border-collapse只能作用于
table元素，对tr、td等其他表格相关元素设置该属性不会生效。 - 当使用collapse取值时，
border-spacing属性会失效，因为合并边框模型不存在边框间隙。 - 如果表格设置了
border-collapse: collapse，同时给表格本身和单元格都设置了边框，表格的边框会被相邻单元格的边框覆盖，遵循上述边框优先级规则。 - 在合并边框模型下，单元格的边框宽度会影响整个表格的总尺寸，因为合并后的边框只计算一次宽度，不会像分离模型那样重复计算相邻边框。
实际场景选择建议
如果需要表格单元格之间有明显的间隙，或者需要单独控制每个单元格的边框样式，选择border-collapse: separate配合border-spacing使用。如果需要表格边框看起来更整体，没有多余的间隙，比如常见的数据报表、信息列表表格，选择border-collapse: collapse更合适。
cssborder-collapse表格盒模型table修改时间：2026-06-12 17:33:34