在网页排版中，HTML表格的边框显示经常让初学者困惑。明明给每个单元格都写了边框，页面上却出现粗细不一的双线，或者单元格之间有明显缝隙。这种现象的根本原因，通常在于没有正确设置css里的border-collapse属性。该属性决定了表格相邻边框是各自独立还是合并为一根线，理解它的两个取值并能熟练写进样式，是精准控制表格线条的前提。
一、border-collapse属性的基本定义
border-collapse是css中专门作用于table元素的属性，用来设置表格的边框模型。它有两个标准取值：separate和collapse。当取值为separate时，表格使用分离边框模型，每个单元格拥有自己的边框，相邻单元格的边框互不重叠，中间可能由border-spacing属性控制留白。当取值为collapse时，表格使用合并边框模型，相邻单元格的边框会合并成一条线，不会出现双线重叠。
从渲染规则看，separate是浏览器的默认表现。也就是说，如果你在css中没有声明border-collapse，表格就会按separate处理。这也是为什么很多开发者随手给td和th加border，却看到单元格之间像有两条线——其实是一条属于左边单元格，一条属于右边单元格，它们并排显示。而collapse会让浏览器计算并选取边框样式中较突出的一条来绘制，视觉上只保留单一线条。
二、separate与collapse的对比示例
下面先用separate模型写一段表格代码。我们给table设定border-spacing为0，但依然不合并边框，可以看到即使间距为零，单元格接壤处仍由两边的边框叠加，形成视觉上的粗线。
<style>
table.sep {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table.sep th, table.sep td {
border: 1px solid #333;
padding: 8px;
}
</style>
<table class="sep">
<tr><th>名称</th><th>数量</th></tr>
<tr><td>苹果</td><td>3</td></tr>
<tr><td>香蕉</td><td>5</td></tr>
</table>
在上面的代码中，因为border-collapse为separate，相邻td的1像素边框贴在一起，实际看起来像2像素的线。如果希望只显示一条细线，就需要改用collapse。下面的例子将同一组结构改为合并模型：
<style>
table.col {
border-collapse: collapse;
width: 100%;
}
table.col th, table.col td {
border: 1px solid #333;
padding: 8px;
}
</style>
<table class="col">
<tr><th>名称</th><th>数量</th></tr>
<tr><td>苹果</td><td>3</td></tr>
<tr><td>香蕉</td><td>5</td></tr>
</table>
把border-collapse设为collapse后，不管多少个单元格相邻，边框都合并为一根1像素的线，不会再出现叠加变粗的问题。这个差异在画数据报表、后台列表时非常关键，能让表格更紧凑清晰。
三、合并模型下的边框优先级
在collapse模型中，如果相邻单元格设置了不同宽度或颜色的边框，浏览器会按一定规则挑选显示哪一条。通常情况下，较宽的边框优先于较窄的，实线优先于虚线，颜色上若宽度相同则按单元格、行、列、表的顺序决定。我们可以利用这一点，给表头th设定更粗的边框，而普通td保持细线，合并后自然表头线更明显。
table.col th {
border: 2px solid #000;
}
table.col td {
border: 1px solid #666;
}
上述样式放在collapse表格里，th与td相邻处的边框会采用2像素黑色，因为宽边框优先级更高。这种写法比用box-shadow或额外嵌套元素去模拟表头线要简单得多，也更利于打印样式统一。
四、常见误区与注意事项
一个常见误区是认为只要给table写了border属性，单元格之间就不会有双线。实际上html的table border属性和css的border-collapse是两套机制。旧式<table border="1">在默认样式下也可能呈现双线，必须配合css的border-collapse: collapse才能稳定消除。另外，如果父容器设置了某些重置样式把border-spacing改大，而collapse模型会忽略border-spacing，因此切换模型前要确认布局预期。
还有一点，collapse模型下不能对某些单元格使用border-radius做出圆角效果，因为合并边框要求边框连续。如果需要圆角表格，只能退回separate模型，并用overflow隐藏或边框模拟。理解这些边界情况，才能在项目中正确选用border-collapse，而不是盲目全局设置。
五、完整可运行示例
以下给出一个完整html文档片段，包含两种模型对照，方便直接保存测试。你可以复制到本地文件观察边框变化。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>border-collapse示例</title>
<style>
body { font-family: sans-serif; }
.box { margin-bottom: 24px; }
table { width: 60%; }
.sep { border-collapse: separate; border-spacing: 0; }
.col { border-collapse: collapse; }
.sep th, .sep td,
.col th, .col td {
border: 1px solid #333;
padding: 6px 10px;
text-align: left;
}
.col th { border: 2px solid #000; }
</style>
</head>
<body>
<div class="box">
<h3>separate模型</h3>
<table class="sep">
<tr><th>商品</th><th>库存</th></tr>
<tr><td>笔</td><td>12</td></tr>
</table>
</div>
<div class="box">
<h3>collapse模型</h3>
<table class="col">
<tr><th>商品</th><th>库存</th></tr>
<tr><td>笔</td><td>12</td></tr>
</table>
</div>
</body>
</html>
通过这个示例可以直观看到，同样的单元格边框声明，仅仅因为border-collapse取值不同，渲染出的线条就有明显差别。日常开发中，建议默认对数据型表格使用collapse，对需要留白或圆角的特殊表格再用separate并配合border-spacing调整。
cssborder-collapse表格边框修改时间：2026-08-01 15:06:45