直接写border: 1px solid #000表格边框看起来粗，是因为浏览器默认border-collapse: separate，导致table、th、td各自渲染1px边框并叠加成视觉2px；必须在table上设置border-collapse: collapse，并同时为table、th、td统一设置一致的border，才能实现真正的单线细边框效果。
为什么直接写 border: 1px solid #000 表格边框看起来还是粗？
因为浏览器默认用 border-collapse: separate，table、th、td 各自画自己的边框，上下左右一叠加，视觉上就是 2px 粗线——哪怕你写的都是 1px。
真正起作用的是 border-collapse: collapse，它必须加在 table 元素上，不是 th 或 td。这个属性让相邻边框“焊”成一条线，才能实现真正的细线效果。
-
border-collapse: collapse是必需的，缺了它，所有边框设置都白搭 - 只给
table设边框不行：那样只有外框，内部单元格之间没线 - 必须同时给
table、th、td都设border，再用collapse合并 - 颜色和宽度要一致，否则合并后可能出现色差或虚线感
border-collapse: collapse 和 border-spacing 的关系
border-spacing 只在 border-collapse: separate 时生效，设了 collapse 就自动失效。所以别试图用 border-spacing: 0 替代 collapse——它压根不干活。
常见错误是：写了 border-spacing: 0 却没写 border-collapse: collapse，结果边框还是双线。
-
border-collapse: collapse是开关，border-spacing是旋钮——开关关不上，旋钮调没用 - 如果项目里用了第三方 CSS 框架（比如 Bootstrap），检查是否被重置了
border-collapse值 - 某些旧版 IE 对
collapse支持不稳定，但现代浏览器（Chrome/Firefox/Safari/Edge）全部支持良好
怎么让细线更“细”？像素级控制技巧
单纯写 border: 1px solid #000 在高 DPI 屏幕（如 MacBook Retina、Windows 缩放 125%）上可能渲染成 1.25px 或更粗。真要压到视觉最细，得用两个手段：
- 用
border: 0.5px solid #000—— Chrome/Edge/Firefox 都支持 subpixel 边框，实际显示比 1px 更纤细 - 配合
color: rgba(0,0,0,0.7)降低对比度，削弱视觉重量（比改粗细更稳妥） - 避免用
border-style: double或groove，这些样式自带厚度，没法变细 - 慎用
box-shadow模拟边框：虽然能做出 0.3px 感觉，但可访问性差，打印时丢失，且影响性能
移动端细线表格怎么不被缩放“吃掉”？
iOS Safari 和部分 Android 浏览器在页面缩放时，会把 1px 边框渲染成 2 物理像素，导致细线变粗。这不是 bug，是系统级抗锯齿策略。
可靠解法不是 hack，而是换思路：用 background-image 或伪元素画线。
- 对
td用::after伪元素 +transform: scaleY(0.5)拉伸后压缩，能稳定输出 0.5px 视觉线 - 更简单的是放弃“绝对细”，改用浅灰
#e0e0e0+1px，靠低对比度营造“细”的观感 - 千万别用
-webkit-transform: scale(0.5)整体缩放表格——文字会模糊，点击区域错位 - 媒体查询里不要只写
max-width，加上screen and (-webkit-min-device-pixel-ratio: 2)才能精准命中高 DPR 设备
border-collapse 是合并逻辑而非“加粗开关”，以及接受：真正的“细”是视觉感知，不是像素数值。很多所谓“细线方案”最后败在忽略设备像素比或可访问性语义，反而让表格更难读。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
