border-collapse: collapse 必须设在 table 上才能合并边框，仅靠它无法实现响应式；响应式需配合 overflow-x: auto、媒体查询或结构重写，否则小屏必溢出或变形。
直接说结论：用 border-collapse: collapse 是解决表格边框“双线”“发虚”“错位”的前提，但仅靠它不能实现响应式；响应式必须配合媒体查询、overflow-x: auto 或重写结构，否则在小屏上表格一定会横向溢出或内容挤压变形。
为什么 border-collapse: collapse 必须加在 table 元素上，而不是 th 或 td
因为 border-collapse 是表格级布局控制属性，只对 table 元素生效。给 th 或 td 设置该属性无效，浏览器会忽略。它的作用机制是让相邻单元格的边框“合并计算”，而不是“叠加渲染”。默认值 separate 下，每个单元格边框独立存在，加上 border-spacing（默认 2px），就会出现明显的缝隙或视觉双线。
常见错误现象：
- 写了
th { border-collapse: collapse }—— 不起作用 - 只给
th, td加了border，没给table加border-collapse: collapse—— 表头和第一行数据之间有明显空隙 - 设置了
border-collapse: collapse，但还保留了border-spacing: 1px—— 后者会被忽略，但容易误以为没生效
小屏下表格横向溢出，border-collapse 完全不管用怎么办
border-collapse 只管边框怎么画，不管表格多宽、会不会撑破容器。响应式失败的根源通常是：表格内容本身宽度固定（比如长文本、数字、URL），又没做截断或换行控制。
实操建议：
- 给
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%并确保父容器有明确宽度约束 - 真要极致适配小屏？考虑用 JavaScript 检测视口宽度，把表格转成卡片列表（
display: block+data-label属性模拟表头）
border-collapse: collapse 和 border-spacing 能不能共存
不能。一旦 table 设置了 border-collapse: collapse，border-spacing 就被强制忽略，无论你写多少次、值是多少都没效果。这是 CSS 规范明确定义的行为（CSS2），所有现代浏览器都严格遵守。
所以如果你看到设置 border-spacing: 0 好像“起作用”了，大概率是因为你漏掉了 border-collapse: collapse，实际起作用的是 border-spacing: 0 在 separate 模式下的表现——但这不是单线边框，只是把缝隙缩到 0，相邻边框依然各自绘制，颜色/粗细稍有差异就露馅。
验证方法：临时把 th 和 td 的 border-color 设成不同颜色（比如 th { border-color: red; }, td { border-color: blue; }），如果能看到红蓝交界处有细微偏移或重影，说明没真正 collapse。
真正麻烦的点不在代码怎么写，而在于很多人把 border-collapse 当成“美化开关”，却没意识到它只是表格渲染模型切换的底层开关——它不负责尺寸、不处理换行、也不管你有没有给 th 加 background 导致小屏下文字被遮挡。这些都得单独补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
