根本原因是未设置border-collapse: collapse；浏览器默认用separate模式，使table、th、td各自绘制边框，相邻边框叠加导致视觉双线或加粗，该属性必须写在table元素上才生效。
为什么设了 border: 1px solid #ccc 还是双线或粗边？
根本原因不是边框写得不够细，而是没开 border-collapse: collapse。浏览器默认用 border-collapse: separate 渲染表格，table、th、td 各自画自己的边框，相邻单元格的右边框 + 右侧单元格的左边框 = 视觉上 2px 粗线，哪怕你写的全是 1px。
必须把 border-collapse: collapse 写在 table 元素上——写在 th 或 td 上无效。它不是“加边框”，而是“合并边框”的开关。
-
table上不设border-collapse: collapse，其他所有边框设置都白搭 - 只给
table设border，td/th不设 → 有外框、无内线 - 只给
td/th设border，table不设且没collapse→ 外框可能漏掉，内线堆叠
table 的 border 属性和 CSS border 完全不是一回事
HTML 的 border="1" 是语义标记，不是样式控制：它只表示“这是数据表”，浏览器会自动给 table 和所有 td/th 加 1px 默认灰边，但不支持颜色、线型、透明度，也不能响应式适配。
CSS 的 table { border: ... } 只作用于表格最外层，不会扩散到单元格；要让每个格子都有边框，必须显式写 td, th { border: ... }。
-
border="2"在 HTML5 中非法，浏览器忽略，不加粗任何边框 -
border="0"表示“非数据表”，不是“无边框”，实际表现取决于 UA 默认样式 - 任何 CSS 规则（哪怕只是
td { border: 0 }）都会覆盖border="1"效果
cellspacing 已淘汰，用 border-spacing 替代但慎用
cellspacing 是 HTML 属性，仅在 border-collapse: separate 模式下生效，现代项目中应避免使用。它的等价 CSS 是 border-spacing，但注意：
-
border-spacing: 0≠border-collapse: collapse：前者只是把间隙设为 0，边框仍分离、仍可能重叠 - 想彻底消除双线，唯一可靠方式是
border-collapse: collapse - 圆角需求（
border-radius）必须用separate模式，此时才需设border-spacing: 0配合overflow: hidden
怎么写出真正纤细清晰的边框？
别只调 1px，现代浏览器支持 subpixel，0.5px 渲染更稳，尤其在高缩放屏（Windows 125%、Mac Retina）下。
关键不是“多细”，而是“三者一致 + 合并”：
-
table, th, td { border: 0.5px solid rgba(0, 0, 0, 0.15); }—— 宽度、样式、颜色完全一致 -
table { border-collapse: collapse; }—— 必须写在table上 - 避免
border-style: dotted或groove：这些自带视觉厚度，压不细 - 浅灰边框易淹没文字，
rgba(0,0,0,0.15)比纯#ddd更稳，配合padding: 6px 10px提升可读性
最容易被忽略的点：颜色和背景色是否真的不同。深色主题下，border: 1px solid white 搭配 background: white 就等于没边框——调试时先看 computed styles 里的 border-color 实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
