border-collapse是控制表格边框合并的CSS属性，取值collapse使相邻单元格边框合并为单线，separate为默认分离模式；应用于table元素后可消除双线间隙，配合td,th设置边框实现紧凑布局，常用于报表等数据密集场景。
在表格布局中，border-collapse 是一个关键的 CSS 属性，用于控制表格边框的呈现方式。它决定了相邻单元格的边框是合并为一条线，还是保持独立分离。
什么是 border-collapse
该属性应用于 table 元素，影响整个表格的边框模型。它有两个常用取值：
- collapse：相邻单元格共享边框，边框会合并成一条线，常用于紧凑型表格设计。
- separate：默认值，每个单元格拥有独立边框，可通过 border-spacing 设置间距。
如何使用 border-collapse
将 border-collapse: collapse; 应用于 table 元素，可消除单元格之间的边框间隙，使表格线条更简洁。
示例代码：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
}
这样设置后，所有单元格的边框会“贴合”在一起，不会出现双线或空隙。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
与表格盒模型的关系
当 border-collapse 为 collapse 时，表格的盒模型行为发生变化：
- 边框不再外扩，而是位于单元格边缘内侧。
- 相邻边框完全重叠，宽度只算一次。
- 无法使用 border-spacing（此属性仅在 separate 模式下有效）。
- 表格整体尺寸更紧凑，适合数据密集型展示。
常见应用场景
适用于需要清晰、简洁线条的数据表格，如报表、后台管理界面等。使用 collapse 可避免边框重复导致的视觉杂乱。
注意：如果希望保留间距并控制边框外观，应使用 border-spacing 配合 separate 模式。
基本上就这些。正确使用 border-collapse 能显著提升表格的视觉一致性和布局效率。
