因为浏览器默认border-collapse: separate，table、th、td各自渲染1px边框并叠加成视觉2px；必须在table上设border-collapse: collapse，并统一为table、th、td设置border-style: solid和一致的border-width，才能实现真正的单线细边框。
为什么写了 border: 1px solid #000 边框还是看着粗？
不是你写错了，是浏览器默认用 border-collapse: separate，table、th、td 各自画自己的 1px 边框，上下左右一碰就叠成视觉上近似 2px 的线。哪怕所有地方都设了 1px，没关掉这个“分离模式”，细线就永远出不来。
border-collapse: collapse 必须加在 table 上，不能只加在 th 或 td
这个属性是开关，只对 table 元素生效。加在 th 或 td 上完全无效。它让相邻边框“焊”在一起，是实现单线的唯一前提。
- 必须写：
table { border-collapse: collapse; } - 别写：
th, td { border-collapse: collapse; }（没用） - 别试图用
border-spacing: 0替代——它只在separate模式下起作用，collapse开启后自动失效 - 如果用了 Bootstrap 等框架，检查是否被重置为
separate，需显式覆盖
border-style 不设，border-width 就是摆设
很多重置样式（比如 normalize.css）会把 th、td 的 border-style 设成 hidden，这时哪怕写 border-width: 2px，DevTools 里看到的也是 0px。宽度必须配合 solid、dashed 等有效样式才起作用。
- 正确写法：
th, td { border: solid #333; border-width: 1px; }（三者齐备） - 避免只写：
th, td { border-width: 1px; }（style 缺失，不渲染） - 遇到
border-top-style: hidden，得用border-style: solid覆盖，必要时加!important临时调试 - 移动端 Safari 对
0.5px渲染不稳定，一律用整数1px
打印时右侧边框消失？检查是否漏了 td 的右边界
打印预览里右边框常“丢”，根本原因是只给 table 和 th 设了边框，但没给 td 显式定义 border-right。border-collapse: collapse 后，哪条边“露出来”取决于声明顺序和特异性，不能靠运气。
- 必须统一写：
table, th, td { border: 1px solid #000; } - 不要只依赖简写：
border容易被后续更具体的border-left等覆盖，导致左右粗细不一致 - 若需外框更粗，单独加：
table { border: 2px solid #000; }，但内部仍保持th, td { border: 1px solid #000; } - 高 DPI 屏幕想更细？可试
border: 0.5px solid rgba(0,0,0,0.7)，Chrome/Firefox/Edge 支持 subpixel，但别在 iOS Safari 上用
border-collapse: collapse）、样式活着（border-style: solid）、每条边都被明确画了（table、th、td 全部设 border）。少一个，细线就塌一半。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
