边框看起来是双线是因为浏览器默认border-collapse: separate，导致table、th、td的边框各自渲染并叠加；必须在table上设border-collapse: collapse，并统一设置table、th、td的border样式和padding才能实现单线效果。
直接给 table、th、td 写 border: 1px solid #ccc 边框，但没加 border-collapse: collapse，边框一定会看起来是双线或发虚——这不是你写错了，是浏览器默认行为在“捣鬼”。
为什么写了 border 还是粗边框？
因为浏览器默认用 border-collapse: separate，table、th、td 各自画自己的 1px 边框，上下左右一碰就叠加成视觉上 2px 的线。哪怕你写的都是 1px，它也不合并。
-
border-collapse: collapse必须加在table元素上，不是th或td - 只给
table加边框 → 只有外框，内部无线 - 只给
th和td加边框、不设collapse→ 内部全是双线 -
border-spacing在collapse模式下完全无效，别试图用它“替代”
细线表格必须同时满足的三个条件
缺一不可，否则就是“看起来像细线，实际不是”。
-
table元素上声明border-collapse: collapse -
table、th、td都设置相同的border（颜色、宽度、样式要一致） - 推荐加
padding（如padding: 8px 12px），避免文字紧贴边框
示例最小可用样式：
立即学习“前端免费学习笔记（深入）”；
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
}
高 DPI 屏幕下怎么让边框更细？
在 Retina 屏、Windows 缩放 125% 等场景下，1px 可能渲染为 1.25px 甚至更粗。真要压视觉重量，得靠两个手段：
- 用
border: 0.5px solid #000：Chrome/Edge/Firefox 均支持 subpixel 渲染，实际更纤细 - 配
color: rgba(0, 0, 0, 0.7)降对比度，比改粗细更稳定、更少兼容性风险 - 避开
border-style: double、groove等自带厚度的样式，它们没法变细
圆角 + 细线能共存吗？
不能直接共存：border-collapse: collapse 会让 border-radius 在 table 上失效。这是 CSS 规范限制，不是 bug。
- 解决办法：用外层
<div>包住table，给div设border-radius+overflow: hidden - 别尝试用
separate模式硬凑圆角——边框间隙难对齐，移动端易露白缝 - 如果项目用了 Bootstrap 等框架，检查是否被重置了
border-collapse值（比如 Bootstrap 5 的.table类默认已设collapse）
