必须设置 border-collapse: collapse 才能稳定控制表格外边框粗细，否则默认 separate 模式下 table 边框与单元格边框叠加导致粗细不一致；需同时确保 border-style 为 solid 且使用整数 border-width。
border-collapse: collapse 必须先开，否则外边框粗细不可控
浏览器默认用 border-collapse: separate，这时 table 的 border 只管最外一圈，但 th 和 td 各自带四条边，中间还夹着 border-spacing 空隙——你看到的“外框”其实是 table 边框 + 第行/列单元格的某几条边叠加的结果，粗细完全不一致。
真正让外框变粗且稳定，得靠 border-collapse: collapse 把所有边框拉到同一层，再分别控制。
-
table元素的border只影响最外轮廓，它不参与内部合并逻辑 -
th和td的border在collapse模式下会互相覆盖，交界处取“宽者胜出” - 所以想让外框更粗，不能只依赖
table { border: 3px solid #000 }，还得确保第一行、最后一行、第一列、最后一列的单元格边框不被压住
推荐写法：
table {
border-collapse: collapse;
border: 3px solid #333; /* 外框主体 */
}
th, td {
border: 1px solid #333; /* 内部统一细线 */
}
/* 加粗外沿：左、上、右、下 */
th:first-child, td:first-child { border-left-width: 3px; }
th:last-child, td:last-child { border-right-width: 3px; }
tr:first-child th, tr:first-child td { border-top-width: 3px; }
tr:last-child td { border-bottom-width: 3px; }border-style 必须显式设为 solid，否则 border-width 无效
很多项目用了 normalize.css 或框架默认样式，它们会把 th、td 的 border-style 设成 hidden 或 none——这时候哪怕写了 border-width: 3px，DevTools 里 border-top-width 显示的还是 0px 或 none。
立即学习“前端免费学习笔记（深入）”；
- 查 Computed 样式时，重点盯
border-top-style、border-left-style这类属性，不是只看宽度 - 临时调试可加
!important强制覆盖：th, td { border-style: solid !important; } - 上线前应定位源头：检查是否引入了重置库，或是否有更高优先级规则把
border-style改成了hidden
移动端和旧浏览器要注意 border-width 值必须是整数
border-width: 0.5px 在 iOS Safari（尤其旧版）渲染极不稳定，有时直接消失，有时糊成一片。Chrome 和 Firefox 对小数支持好些，但跨端一致性差。
- 统一用整数：
1px、2px、3px - 不要指望
border-width: thin或medium能精确控制粗细——不同浏览器解释不同，thin可能是1px，也可能是0.5px - 如果真需要视觉上更细的线，用
border-color: rgba(0,0,0,0.2)配合1px更可靠
真正卡住的从来不是“怎么写”，而是 border-style 是否活着、border-collapse 是否生效、以及哪条边在合并时“赢了”。调试时别急着改宽度，先打开 DevTools 看 computed 样式里的 style 和 width 两个值是否都符合预期。
