如何设置HTML表格的边框合并模式：BORDER-COLLAPSE属性应用

border-collapse必须写在table元素上才生效，写在td/tr等其他标签上无效；启用后相邻边框按宽度>样式>声明顺序优先级合并，border-spacing自动失效，外边框需通过table设置，内边框由td/th定义。

border-collapse 必须写在 table 元素上才生效，其他位置全无效——这是边框“没反应”的根本原因。

为什么写了 border-collapse: collapse 却还是双线？

浏览器默认用 border-collapse: separate，每个 td 和 th 独自画边框，加上默认 border-spacing: 2px，视觉上就是两条线夹着白缝。
常见错误包括：
• 把 border-collapse: collapse 写在 td 或 tr 上（浏览器直接忽略）
• 用了过时的 border="1" 属性，但没配 CSS 合并逻辑
• 被 UI 框架（如 Bootstrap）或 normalize.css 默认设为 separate，却没覆盖
• 页面没声明 !DOCTYPE，触发怪异模式，属性行为不可靠

正确设置三步缺一不可

只有同时满足以下三点，才能稳定呈现单线边框：
• table { border-collapse: collapse; } —— 合并所有相邻边框，废掉 border-spacing
• table { border: 1px solid #333; } —— 控制外边框（可选，但建议显式设）
• th, td { border: 1px solid #333; } —— 控制内边框；值必须和外边框一致，否则交界处会加粗（比如 th 设 2px、td 设 1px，合并后该线就是 2px）

合并后边框到底显示哪一条？

不是叠加，也不是取平均，而是按优先级“胜出”：
• 宽度最大者胜出（2px > 1px）
• 宽度相同时，样式更实者胜出（solid > dashed > dotted）
• 宽度和样式都相同时，CSS 中后定义的规则胜出（注意源码顺序和选择器权重）
• border: none 不参与竞争，会被其他方向的边框“穿透”显示（例如想让某单元格只显示顶边框，得写 td { border: none; border-top: 1px solid #000; }）

为什么还有缝隙？别查 border-spacing，先看 padding

border-collapse: collapse 下，border-spacing 已失效，你看到的“缝隙”大概率是 th/td 的 padding 撑开的：
• 统一清空： th, td { padding: 0; }
• 需要留白？改用 padding 控制，比如 th, td { padding: 8px 12px; }
• 别给 table 设 display: block 或 inline-block —— 这会让 border-collapse 失效（它只在 display: table 及其变体下工作）

立即学习“前端免费学习笔记（深入）”；

真正容易被忽略的是：启用 border-collapse: collapse 后，表格盒模型就变了——内部边框不再各自占空间，table 的总宽度 ≠ 所有 td 宽度之和 + 两倍边框。调样式时，得把 table 的 border、padding 和 width 一起看。