css border-collapse在表格盒模型中如何使用

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; }

这样设置后，所有单元格的边框会“贴合”在一起，不会出现双线或空隙。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

与表格盒模型的关系

当 border-collapse 为 collapse 时，表格的盒模型行为发生变化：

• 边框不再外扩，而是位于单元格边缘内侧。
• 相邻边框完全重叠，宽度只算一次。
• 无法使用 border-spacing（此属性仅在 separate 模式下有效）。
• 表格整体尺寸更紧凑，适合数据密集型展示。

常见应用场景

适用于需要清晰、简洁线条的数据表格，如报表、后台管理界面等。使用 collapse 可避免边框重复导致的视觉杂乱。

注意：如果希望保留间距并控制边框外观，应使用 border-spacing 配合 separate 模式。

基本上就这些。正确使用 border-collapse 能显著提升表格的视觉一致性和布局效率。

以上就是css css属性 css border table td th