border-collapse是控制表格边框合并的CSS属性，取值collapse使相邻单元格边框合并为单线，separate为默认分离模式；应用于table元素后可消除双线间隙，配合td,th设置边框实现紧凑布局，常用于报表等数据密集场景。
在表格布局中，border-collapse 是一个关键的 CSS 属性，用于控制表格边框的呈现方式。它决定了相邻单元格的边框是合并为一条线，还是保持独立分离。
该属性应用于 table 元素，影响整个表格的边框模型。它有两个常用取值：
将 border-collapse: collapse; 应用于 table 元素，可消除单元格之间的边框间隙，使表格线条更简洁。
示例代码：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
}
这样设置后，所有单元格的边框会“贴合”在一起，不会出现双线或空隙。
当 border-collapse 为 collapse 时，表格的盒模型行为发生变化：
适用于需要清晰、简洁线条的数据表格，如报表、后台管理界面等。使用 collapse 可避免边框重复导致的视觉杂乱。
注意：如果希望保留间距并控制边框外观，应使用 border-spacing 配合 separate 模式。
基本上就这些。正确使用 border-collapse 能显著提升表格的视觉一致性和布局效率。
以上就是css border-collapse在表格盒模型中如何使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
924
收藏
