只改border-width没反应，是因为border-style被设为none或hidden，必须同时设置border-style、border-color和border-width三者才生效；调试时应优先检查computed中的border-top-style而非border-top-width。
为什么只改 border-width 没反应？
写了 td { border-width: 2px; } 却没变粗，大概率是 border-style 被浏览器或重置样式（比如 normalize.css）设成了 none 或 hidden——宽度再大，样式不存在就根本不会渲染。DevTools 里看 Computed 标签页，重点盯 border-top-style，不是只看 border-top-width。
- 必须三者齐备：
border-style、border-color、border-width，缺一不可 -
border-style: hidden比none更霸道，连宽度都不认，得用border-style: solid !important临时覆盖（上线前要定位源头） - 如果用了 Bootstrap 或 Tailwind，它们可能默认设了
border-collapse: separate，得显式覆盖成collapse
border-collapse: collapse 下怎么精准加粗某一边？
开启 collapse 后，相邻单元格边框会合并，最终显示的是“胜出”的那条边——靠选择器优先级和声明顺序决定。想加粗外轮廓或关键分隔线，不能只靠统一设宽，得控制单边：
- 第一列左边界加粗：
td:first-child, th:first-child { border-left-width: 3px; } - 最后一行下边框加粗：
tr:last-child td { border-bottom-width: 2px; } - 表头顶部加粗：
th { border-top-width: 2px; } - 别忘了
table自己的外框：table { border: 2px solid #333; }，它只管最外一圈，不影响内部合并逻辑
要不要用 border-collapse: separate？
不用 collapse 看似简单，每个单元格边框独立渲染，但实际更难统一粗细：间隙由 border-spacing 控制，而这个属性在 IE8 及以下不支持；移动端 Safari 对小数像素（如 0.5px）渲染不稳定。
- 真要用
separate，必须配border-spacing: 0消除空隙 - 给
td和th单独设完整border：border: 3px solid #333，不能只写border-width - 别给
table加border，否则会和单元格边框重叠出双线 - 性能影响不大，但兼容性风险比
collapse高得多
哪些地方最容易被忽略？
调试时盯着 border-width 改来改去却没效果，往往是因为没确认 border-style 是否活着，或者没意识到 border-collapse 的合并逻辑正在悄悄覆盖你的设置。真正起效的从来不是“统一设一个值”，而是对 th:first-child、tr:last-child td、td:first-child 这类选择器做差异化控制——漏掉伪类、顺序写反、或没覆盖到 th，视觉就断层了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
