border-collapse: collapse 必须写在 table 元素上才生效，写在 tr、th 或 td 上完全无效；它合并相邻边框、废除 border-spacing，需配合统一的 table 和 th/td 边框声明才能消除双线。
为什么加了 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 必须写在哪个元素上？
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-collapse: collapse，border-spacing 就被忽略——你不能再靠它调单元格间距。
想控制“疏密感”，得改 padding：
- 需要列内留白：
th, td { padding: 8px 12px; } - 想让某列更宽松：单独给对应
td加style="padding-left: 16px;" - 空单元格要不要显示边框？
empty-cells: show | hide在collapse下也不起作用，统一由border控制
移动端适配时最容易漏掉的一件事
border-collapse: collapse 解决的是边框渲染逻辑，不是响应式本身。小屏上表格照样会横向溢出——它不会自动换行或隐藏列。
真要适配移动端，得额外加：
-
table { display: block; overflow-x: auto; }包裹滚动 - 媒体查询里把
th,td改成display: block重排结构（需配合data-label补语义） - 最常被跳过的一步：忘了在
table上同时声明width: 100%或min-width: fit-content，导致collapse后表格意外收缩、内容挤压变形
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
