加了border仍双线、发虚是因为浏览器默认border-collapse: separate，需在table上设border-collapse: collapse、table外边框和th/td内边框三者统一。
为什么加了border还是双线、发虚？
浏览器默认用 border-collapse: separate，每个 th 和 td 都独立画自己的边框。左边单元格的右边框 + 右边单元格的左边框 = 看起来像两条线叠在一起，中间还夹着默认 border-spacing: 2px 的空白缝。
常见错误现象包括：
- 只给
table设border: 1px solid #000，结果只有外框，内部没线 - 用了过时的
border="1"，但 Chrome/Firefox 渲染出粗细不均、颜色不可控的断续边框 - 给
th和td都加了border，却漏掉border-collapse: collapse，边框依然双线、错位
border-collapse: collapse 必须写在 table 上
border-collapse 是表格级布局属性，只对 table 元素生效；写在 tr、th 或 td 上完全无效。
正确做法是三步 CSS 声明（缺一不可）：
立即学习“前端免费学习笔记（深入）”；
-
table { border-collapse: collapse; }—— 合并所有相邻边框，废掉border-spacing -
table { border: 1px solid #333; }—— 控制外边框（可选，但建议设） -
th, td { border: 1px solid #333; }—— 控制内边框，值必须和外边框一致，否则交界处会加粗
如果 th 边框是 2px 而 td 是 1px，合并后交界线会变成 2px，视觉断裂明显。
想让边框更细？别只调 px 值
单纯把 border-width 改成 0.5px 不可靠：多数浏览器不支持亚像素渲染，实际仍按 1px 显示；部分设备（如高 DPI 屏）可能渲染模糊。
真正让边框“看起来更细”的关键在于统一性和视觉控制：
- 确保
table、th、td的border宽度、样式、颜色完全一致 - 用
border-top+border-left组合代替全边框（例如只给table设上/左，th/td设下/右），避免重叠加粗 - 配合
background-color和padding强化线条对比，比死磕像素更有效
兼容性与响应式场景下的坑
border-collapse: collapse 在所有现代浏览器中支持良好，但要注意两个隐藏问题：
- IE8 及更早版本不支持
border-collapse的动态修改（比如 JS 改style.borderCollapse），只能靠初始 CSS - 在响应式表格里，如果用
display: block或overflow-x: auto包裹table，某些安卓 WebView 会重置border-collapse行为，需额外加table { min-width: max-content; }固定行为 - 空单元格在旧版 Safari 中可能不渲染边框，必须确保
th和td至少有空格或empty-cells: show（但该属性仅在separate模式下生效，所以慎用）
最稳妥的做法：始终把 border-collapse: collapse 当作表格样式的起点，而不是可选项——漏掉它，其他边框设置基本白忙。
