border-collapse: collapse 是解决表格边框双线、断开、发虚的唯一可靠方式；它合并相邻边框、废除 border-spacing，需在 table 上声明且配合统一 border 和 padding 控制样式。
border-collapse: collapse 是解决 table 边框“双线”“断开”“发虚”的唯一可靠方式，不加它，其他边框设置基本白忙。
为什么加了 border 还是双线？
浏览器默认用 border-collapse: separate，每个 th 和 td 都独立画自己的边框。左边单元格的右边框 + 右边单元格的左边框 = 看起来像两条线叠在一起，中间还夹着默认 border-spacing: 2px 的空白缝。
常见错误现象包括：
- 只给
table设border: 1px solid #000，结果只有外框，内部没线 - 用了过时的
border="1"，但 Chrome/Firefox 渲染出粗细不均、颜色不可控的断续边框 - 给
th和td都加了border，却漏掉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，视觉断裂明显。
collapse 后，border-spacing 和 empty-cells 失效
一旦设了 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属性补语义） - 别指望靠
border-collapse让表格“自适应”，它只管“怎么画线”，不管“画多宽”
最常被跳过的一步：忘了在 table 上同时声明 width: 100% 或 min-width: fit-content，导致 collapse 后表格意外收缩、内容挤压变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
