border-collapse 是 css 表格布局中的关键属性，其值 collapse 使边框合并、无间距，适合简洁风格；separate 模式下边框独立，可通过 border-spacing 设置间距，适合需要留白的设计。1. collapse：相邻边框合并，样式优先级影响显示结果，常用于紧凑表格。2. separate：默认值，边框不合并，支持设置水平与垂直间距。3. 注意事项：border-spacing 仅在 separate 下有效，旧浏览器可能存在兼容性问题，使用时需注意测试。选择应根据具体设计需求决定。
在表格布局中，border-collapse 是一个很常用的 CSS 属性，用来控制表格边框的显示方式。它有两个主要取值：collapse 和 separate，虽然看起来只是样式上的小调整，但在实际使用中会影响边框合并、间距设置等关键表现。
1. border-collapse: collapse —— 边框合并
当你设置表格为 collapse 模式时，表格的相邻单元格边框会合并成一条边框，而不是各自独立显示。这种模式下：
- 单元格之间的边框不会重复绘制
- 设置边框时需要注意“谁覆盖谁”的问题（比如不同颜色或粗细）
- 整体看起来更紧凑，适合需要简洁表格风格的场景
举个例子，如果你给两个相邻单元格分别设置了红色和蓝色边框，最终显示的是其中一条边框，具体颜色取决于浏览器如何处理冲突。
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
}
这时候整个表格的边框就会紧紧贴在一起，不会有额外空隙。
2. border-collapse: separate —— 边框分离
这是默认值。在这种模式下，每个单元格都有自己的独立边框，彼此之间可能会有空隙。它的特点包括：
- 可以通过 border-spacing 来控制单元格之间的水平和垂直间距
- 边框不会合并，视觉上更加松散
- 更适合需要留白感的设计，比如带边距的表格
例如，你想要让表格看起来不那么密集，可以这样写：
table {
border-collapse: separate;
border-spacing: 10px 5px; /* 水平间距10px，垂直间距5px */
}
这时你会发现单元格之间出现了明显的空隙，而且边框是各自独立显示的。
3. 常见误区与注意事项
有时候新手会误以为设置了 border-spacing 就能影响 collapse 模式下的表格，但其实：
- border-spacing 在 collapse 模式下完全无效
- 如果你需要控制单元格间距，必须用 separate
- 同样地，如果你希望边框合并得干净利落，一定要记得显式设置为 collapse
另外，有些旧版本浏览器对这两种模式的支持略有差异，虽然现在基本不是问题了，但如果是兼容性要求较高的项目，还是建议测试一下。
基本上就这些。简单来说，collapse 更紧凑、适合传统表格风格；而 separate 更灵活，适合需要控制间距的设计。选择哪个取决于你的具体需求。
暂无评论内容