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;}
这样设置后，所有单元格的边框会“贴合”在一起，不会出现双线或空隙。
稿定抠图
AI自动消除图片背景
76 查看详情
与表格盒模型的关系
当 border-collapse 为 collapse 时，表格的盒模型行为发生变化：
边框不再外扩，而是位于单元格边缘内侧。 相邻边框完全重叠，宽度只算一次。 无法使用 border-spacing（此属性仅在 separate 模式下有效）。 表格整体尺寸更紧凑，适合数据密集型展示。
常见应用场景
适用于需要清晰、简洁线条的数据表格，如报表、后台管理界面等。使用 collapse 可避免边框重复导致的视觉杂乱。
注意：如果希望保留间距并控制边框外观，应使用 border-spacing 配合 separate 模式。
基本上就这些。正确使用 border-collapse 能显著提升表格的视觉一致性和布局效率。
以上就是css border-collapse在表格盒模型中如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1027514.html
微信扫一扫 
支付宝扫一扫 
