table 默认边框是分离的；浏览器默认使用 border-collapse: separate，导致相邻单元格边框呈现双倍宽度，需显式设置 border-collapse: collapse 并统一为 th、td 设置 1px 边框才能实现稳定 1px 效果。
table 默认边框是合并还是分离？
浏览器默认用 border-collapse: separate，所以即使给 td 和 table 都设了 1px 边框，实际会看到双倍粗细（比如 2px 宽的缝），尤其在相邻单元格之间。这不是 bug，是 CSS 规范行为。
- 必须显式设置
border-collapse: collapse才能让边框真正“合起来”，实现视觉上干净的1px表格边框 - 只设
table { border: 1px solid #000 }不够——它只包住整个表格外框，内部单元格之间依然有缝隙 - 如果想保留分隔感（比如斑马纹+间隙），那得用
border-spacing配合separate，但那就不是“1px 边框”的原始需求了
怎么写才能让所有边线都稳定为 1px？
核心就两条：合并边框 + 统一指定单元格边框。别漏掉 th，否则表头和内容边框可能不一致。
- 给
table加border-collapse: collapse - 给
th, td都设border: 1px solid #ccc（颜色按需改） - 不需要单独给
table设border，除非你想要外框比内线更粗/不同色
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
为什么有时候还是看到 2px 或虚影？
常见原因不是代码写错，而是渲染层面的干扰：
- 父容器缩放（比如 Chrome 的「缩放页面」设为 110%）会让
1px被插值成非整像素，出现模糊或视觉加粗 - 启用了 subpixel 渲染（尤其是 macOS + Safari），
1px可能被摊到多个物理像素上，看起来发虚 - 某些旧版 IE 对
border-collapse支持不稳，但现代项目基本不用考虑 - 检查是否意外继承了其他样式（比如重置库把
td的border设成了none）
移动端适配要注意什么？
在高 DPR 屏幕（如 iPhone Retina）上，1px 物理像素线会被拉伸成 2px 显示，看起来明显变粗。这不是 bug，是设备特性。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案有限：可用
transform: scaleY(0.5)配合origin，但只适用于水平边框；垂直边框得换scaleX - 更稳妥的做法是接受“视觉 1px”而非“物理 1px”，用
border: 0.5px solid #000（部分新浏览器支持） - 或者直接用伪元素 +
transform模拟，但会增加 DOM 复杂度
border-collapse 和 th/td 的 border 上，漏掉任意一个，1px 就立不住。 
