直接加border-collapse: collapse可解决边框重叠变粗问题，但必须作用于<table>元素，且需确保无border-style: hidden等覆盖样式，并通过computed样式验证生效；合并后应拆分控制border-width/border-color/border-style以精确调整。
直接加 border-collapse: collapse 就能解决绝大多数边框重叠变粗的问题，但前提是它得生效——很多人写了却没效果，是因为漏掉了关键依赖或被其他样式覆盖。
为什么写了 border-collapse: collapse 还是重叠？
最常见原因是：这个属性只作用于 <table> 元素本身，不是写在 td 或 th 上就管用。另外，如果父级有 CSS 重置（比如某些 UI 框架或 normalize.css），可能把 table 的 border-style 设成了 hidden，这时哪怕写了 border-width 也完全不显示。
- 检查 Elements 面板里
table的 computed 样式，确认border-collapse确实是collapse，且没被更高优先级规则覆盖 - 查
border-top-style、border-left-style等是否为none或hidden；hidden比none更彻底，连宽度都不渲染 - 避免在
table上同时用border-spacing和collapse——border-spacing在collapse模式下完全无效，纯属干扰
border-collapse: collapse 后边框粗细怎么精确控制？
合并后，相邻单元格的边框会按“取宽、取深、取前”规则叠加，所以不能只靠 border 简写去设，否则容易失控。真正稳的写法是拆开控制。
- 先统一声明
border-style和border-color，比如td, th { border-style: solid; border-color: #ccc; } - 再单独用
border-width调整各边：外侧加粗可用border-width: 2px 1px 1px 2px，表头底部加粗用th { border-bottom-width: 2px; } - 想只保留内线（无外边框）？给
table { border: none; }，再给td, th { border-left: 1px solid #eee; border-bottom: 1px solid #eee; } - 注意：
tr:last-child td { border-bottom-width: 2px; }这类选择器在collapse下有效，但tr:first-child th的上边框会被table的上边框覆盖，得额外处理
移动端或老浏览器要注意什么？
border-collapse: collapse 本身兼容性极好（IE8+ 都支持），但细节容易翻车：
立即学习“前端免费学习笔记（深入）”；
- Safari on iOS 对
border-width小于 1px（如0.5px）渲染不稳定，建议只用整数 - 如果项目必须兼容 IE7 及更早版本（极少数政企系统），
collapse不支持，只能退到separate+border-spacing: 0，再手动用outline模拟边框（但outline不支持圆角、也不占布局空间） - 嵌套表格时，内层
table必须单独设border-collapse: collapse，父层的设置不会继承
真正麻烦的从来不是加不加 collapse，而是加了之后发现某几列突然变细、某个交点颜色不对、或者调试半天发现是 border-style: hidden 在背后锁死了所有边框——这些地方不看 computed 样式，光扫 CSS 文件根本找不到问题。
