border-width 单独设置无效，因浏览器默认 border-style 为 none，必须显式声明 solid 等样式；在 border-collapse: collapse 下，需对 th、td 设置 border 而非仅 table；separate 模式需配合 border-spacing: 0；响应式建议用 clamp() 或 box-shadow 替代固定像素。
border-width 单独设无效？先检查 border-style
写了 border-width: 3px 却没加粗，八成是 border-style 没定义。浏览器默认值是 none，宽度再大也看不见边框。必须显式声明样式，比如 solid、dashed 或 dotted。
常见踩坑点：
-
normalize.css或某些重置样式会把th、td的border-style设为hidden，比none更彻底，连border-width都不认 - 调试时别只盯
border-top-width，去 Elements 面板看border-top-style的 computed 值是不是none或hidden - 临时验证可加
border-style: solid !important，确认是否被覆盖
table + border-collapse: collapse 时，别只调 table 的 border
用 border-collapse: collapse（几乎所有现代框架默认启用）后，table 元素自身的 border 只控制外框，内部线宽完全由 th 和 td 的边框决定。光给 table 加粗，单元格之间还是细线。
正确做法：
- 统一控制：给
th, td设border: 2px solid #000，而不是只写border-width: 2px - 差异化加粗：外侧边更粗，可用
border-width: 3px 1px 1px 3px（上右下左），配合border-style: solid - 最后一行加粗底边：
tr:last-child td { border-bottom-width: 3px; }，但前提是border-style已生效
border-collapse: separate 场景下，border-spacing 是关键
不用 collapse 时，每个单元格是独立盒子，border 能按预期渲染，但默认有空隙。想加粗又保持紧凑，不能只靠 border-width。
必须同步处理：
- 设
border-spacing: 0消除单元格间隙，否则加粗后空隙更突兀 -
border-spacing在 IE8 及以下不支持，老项目慎用 - 移动端 Safari 对小数
border-spacing（如0.5px）渲染不稳定，只用整数 - 若需阴影或背景渐变，
separate是唯一选择，但得接受边框物理分离的事实
响应式加粗边框要注意像素陷阱
固定写 border-width: 2px 在高 DPI 屏（如 Retina、Windows 缩放 125%）上会显得过粗，而 0.5px 又在旧版 Safari 不支持。
更稳妥的替代方案：
- 用
box-shadow: 0 0 0 0.5px #000模拟细边框，兼容性好 - 需要真实边框时，用
clamp(1px, 0.1vw, 2px)动态缩放，避免硬编码 - 单边加粗（如表头下边框）可用
transform: scaleY(0.5)配合border-top，但仅限单边且需父容器overflow: visible
表格边框加粗不是改一个值就能完事的事——border-width 是开关，border-style 是电源，border-collapse 是布线方式，三者缺一不可。最容易被忽略的是：你看到的“没加粗”，往往不是宽度没起作用，而是边框根本没通电。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
