表格边框粗细不一致的根本原因是浏览器将table、th、td视为独立边框源且默认border-style常被重置为none或hidden；须先统一设border-style:solid，再设border-width，并在collapse模式下通过伪类控制单边宽度。
为什么表格边框粗细不一致？
根本原因不是你没写 border-width，而是浏览器默认把 table、th、td 当成三个独立边框源——table 自带外框，每个单元格又自带四边，border-collapse: collapse 一开，它们就按“谁的样式优先级高”来叠加，结果外侧、内侧、表头、数据行全不一样粗。
统一粗细必须先清掉默认干扰
很多重置库（比如 normalize.css）会悄悄把 th 和 td 的 border-style 设成 hidden 或 none，这时哪怕写了 border-width: 2px 也完全不生效。所以第一步不是加粗，是确认并覆盖掉这些隐性重置：
- 检查 DevTools 的 Computed 样式里
border-top-style是否为solid（不是none或hidden） - 强制初始化：用
table, th, td { border-style: solid; }把样式兜底 - 再统一设宽：
table, th, td { border-width: 1px; }——注意这里不能只写table，否则单元格内部边框还是靠继承，不可控
collapse 模式下怎么让外框比内框粗？
border-collapse: collapse 是主流选择，但它会让相邻边框“合并取最大值”。想让表格外框更醒目、内线更细，得放弃“统一设在 table 上”的思路，转而控制单元格单边：
- 给所有
th、td设基础边框：border: solid #000; border-width: 1px; - 用伪类加粗外沿：
th:first-child, td:first-child { border-left-width: 2px; }、tr:last-child td { border-bottom-width: 2px; } - 别忘了
table自己的边框：table { border: 2px solid #000; }——它只管最外一圈，不影响内部合并逻辑 - 顺序很重要：先设
border-style和border-color，再设border-width，否则宽度会被忽略
separate 模式下粗细反而难统一？
不用 collapse 看似简单，但 border-spacing 在 IE8 及以下不支持，且移动端 Safari 对小数像素（如 0.5px）渲染异常。真要用它，必须：
- 显式设
border-spacing: 0消除间隙 - 对
th、td单独设完整border：border: 2px solid #333（不能只写border-width） - 避免给
table加border，否则会和单元格边框重叠出双线
实际项目里，90% 的“粗细不一致”问题都卡在 border-style 被重置或未定义上，而不是宽度本身。调试时盯死 Computed 里的 style 值，比反复改 width 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
