根本原因是HTML的border属性只作用于table外框，而CSS的border默认同时加在table、td、th上，三者边框物理重叠导致视觉变粗；必须用border-collapse:collapse合并边框并拆分控制各边宽度。
为什么用CSS border 替代 HTML border 属性后边框反而变粗了
根本原因是：HTML 的 border 属性只作用于 <table> 元素外框，而 CSS 的 border 默认会同时加在 <table>、<td>、<th> 上——三者边框物理重叠，视觉上就变成双倍粗细（比如都设 1px solid #000，实际渲染接近 2px）。
常见错误现象：
- 表格整体看起来“发黑”或边线模糊
- 缩放页面时出现明显双线或错位缝隙
- 明明写了
border: 1px solid #ccc，但 DevTools 中 computed 样式显示 border-width 是2px
border-collapse: collapse 必须写在 <table> 上才生效
这个属性不继承，也不作用于 td 或 th；写错位置等于没写。
- ✅ 正确：
table { border-collapse: collapse; } - ❌ 无效：
td, th { border-collapse: collapse; }（语法错误） - ❌ 无效：
.wrapper table { border-collapse: collapse; }（如果被更高优先级规则覆盖，仍不生效）
验证是否生效：打开 Elements 面板 → 选中 <table> → 查看 Computed 样式中 border-collapse 是否为 collapse，且 border-top-style 等未被设为 hidden 或 none。
立即学习“前端免费学习笔记（深入）”；
合并后怎么精确控制某一边的粗细
border-collapse: collapse 后，相邻边框按“取宽、取深、取前”规则叠加，不能靠 border 简写统一控制。必须拆开写。
- 先统一样式基础：
td, th { border-style: solid; border-color: #ddd; } - 再单独控制宽度：
table { border: none; }（去掉外框干扰） - 只留内线：
td, th { border-left: 1px solid #eee; border-bottom: 1px solid #eee; } - 表头底部加粗：
th { border-bottom-width: 2px; } - 最后一行加粗底边：
tr:last-child td { border-bottom-width: 2px; }
注意：tr:first-child th 的上边框会被 table 的上边框覆盖，若需保留，得额外给 table 设 border-top: none，再手动加 th:first-child { border-top: 1px solid #ddd; }。
嵌套表格和老浏览器的坑
嵌套表格时，内层 <table> 必须单独声明 border-collapse: collapse；父层设置不会穿透。
- Safari on iOS 对
border-width: 0.5px渲染不稳定，建议只用整数（1px、2px） - IE7 及更早版本不支持
collapse，只能退到border-spacing: 0+outline模拟，但outline不支持圆角、不占布局空间，慎用 - 某些 UI 框架（如 Bootstrap 4+）默认重置了
table的border-style为hidden，此时即使写了border-width也完全不显示，需显式覆盖：table { border-style: solid; }
真正麻烦的从来不是加不加 collapse，而是加了之后发现某几列突然变细——那大概率是某处 border-color 或 border-style 被意外覆盖了。
