结论是边距重叠与表格边框重叠无关，解决表格“双线”“缝隙”问题只需border-collapse: collapse；它必须作用于table元素，配合统一的border设置，才能合并相邻边框、消除默认间隙。
直接说结论：边距重叠（margin collapse）和表格边框重叠是两码事，别混——你真正想解决的，是表格单元格之间“双线”“缝隙”“发虚”的边框问题，核心只靠 border-collapse: collapse 这一个属性就能搞定。
为什么加了 border 还是双线？
浏览器默认用 border-collapse: separate，每个 th 和 td 各自画自己的边框。左边单元格的右边框 + 右边单元格的左边框 = 视觉上两条线叠在一起，中间还夹着默认 border-spacing: 2px 的空白缝。
常见错误现象包括：
- 只给
table设border: 1px solid #000，结果只有外框，内部没线 - 用了过时的
border="1"，Chrome/Firefox 渲染出粗细不均、颜色不可控的断续边框 - 给
th和td都加了border，却漏掉border-collapse: collapse，边框依然双线、错位
border-collapse: collapse 必须写在 table 上
border-collapse 是表格级布局属性，只对 table 元素生效；写在 tr、th 或 td 上完全无效，浏览器会忽略。
正确做法是三步 CSS 声明（缺一不可）：
-
table { border-collapse: collapse; }—— 合并所有相邻边框，废掉border-spacing -
table { border: 1px solid #333; }—— 控制外边框（可选，但建议设） -
th, td { border: 1px solid #333; }—— 控制内边框，值必须和外边框一致，否则交界处会加粗
如果 th 边框是 2px 而 td 是 1px，合并后交界线会变成 2px，视觉断裂明显。
border-collapse: collapse 和 border-spacing 能不能共存？
不能。一旦 table 设置了 border-collapse: collapse，border-spacing 就被强制忽略，无论你写多少次、值是多少都没效果。这是 CSS 规范明确定义的行为（CSS2），所有现代浏览器都严格遵守。
所以如果你看到设置 border-spacing: 0 好像“起作用”了，大概率是因为你漏掉了 border-collapse: collapse，实际起作用的是 border-spacing: 0 在 separate 模式下的表现——但这不是单线边框，只是把缝隙缩到最小而已。
响应式下表格横向溢出，border-collapse 管不管用？
完全不管用。border-collapse: collapse 解决的是“怎么画线”，不是“画多宽”。小屏上表格照样会横向溢出——它不会自动换行或隐藏列。
实操建议：
- 给
table外层加一个带overflow-x: auto的容器，比如<div class="table-wrapper"><table></table></div>，再配.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } - 对
td、th加white-space: normal或word-break: break-word，防止长单词/无空格字符串撑开列宽 - 避免在
table上设死宽度（如width: 800px），改用width: 100%并确保父容器有明确宽度约束
最常被跳过的一步：忘了在 table 上同时声明 width: 100% 或 min-width: fit-content，导致 collapse 后表格意外收缩、内容挤压变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
