border-collapse: collapse必须作用于table元素才能合并相邻边框，否则默认separate模式下th、td边框叠加导致视觉双线；需配合统一border设置及清除border-spacing等冲突项。
直接写 border: 1px solid #000 看起来边框还是粗，不是你代码写错了，而是浏览器默认用 border-collapse: separate，table、th、td 各画各的边框，一叠加就变双线——真正起作用的是 border-collapse: collapse，它必须加在 table 元素上。
为什么写了 border 还是双线？
这是最常踩的坑：只给 table 或只给 td 设 border，没配 border-collapse: collapse。浏览器按分离模型渲染，相邻单元格边框物理重叠，视觉上就是 2px 粗线。哪怕你写的全是 1px，也白搭。
-
border-collapse: collapse是开关，不是可选项——缺了它，所有边框设置都无效 -
border-spacing: 0只在separate模式下生效，设了collapse就自动被忽略 - 第三方 CSS 框架（如 Bootstrap）可能重置了
border-collapse值，要检查 computed styles 确认是否真为collapse
推荐写法：table + th + td 统一设 border + collapse
这是最稳、最易维护的方案，现代浏览器全部支持，代码清晰，无兼容性风险。
- 必须同时给
table、th、td设置相同宽度和颜色的border，比如border: 1px solid #ccc -
border-collapse: collapse只写在table上，不要写在th或td上 - 如果表格有
caption，它不参与边框合并，无需额外设 border - 高 DPI 屏幕（如 Retina、Windows 缩放 125%）下想更细，可用
border: 0.5px solid #000，Chrome/Firefox/Edge 都支持 subpixel 渲染
替代写法：单边边框拼接（适合旧项目或特殊样式）
不用 collapse，靠方向性边框拼出细线效果，适合需要表头/数据行不同边框色、或需兼容极老 IE 的场景。
立即学习“前端免费学习笔记（深入）”；
-
table只设border-top和border-left -
th和td只设border-right和border-bottom - 必须配合
border-spacing: 0和border-collapse: separate，否则间隙会露白 - 容易漏掉最后一行/列的边框，调试时建议临时加背景色看边界
容易被忽略的细节
细线效果最终是否干净，往往卡在几个“看不见”的地方：
-
th和td的padding值不一致，会导致文字对齐错位，视觉上像边框歪斜 - 用了
box-sizing: border-box但没统一应用到table、th、td，可能导致宽度计算偏差 - 表格嵌套时，子 table 的
border-collapse不继承，必须显式重设 - 如果用了
vertical-align: middle，某些字体下 baseline 对齐会让边框看起来不匀称，可改用top或bottom
