border-collapse: collapse 必须设在 table 元素上才能生效，写在 td/tr/th 或外层 div 上无效；它与 border-spacing 互斥，合并边框按宽度＞样式实度＞声明顺序优先级胜出。
直接用 border-collapse: collapse，否则默认的 separate 模式下边框永远是双线加间距，再调 border-width 也没用。
为什么 table 默认边框看起来又粗又虚？
因为浏览器默认给 table、td、th 都设了独立边框（border-collapse: separate），且单元格之间有默认 border-spacing（通常是 2px），导致视觉上边框叠加、发虚、不连续。
常见错误写法：td { border: 1px solid #000; } —— 这只会让每个单元格画自己的边框，相邻单元格的边框会并排出现，实际看到的是 2px 宽的“伪粗线”。
正确做法必须先统一控制表格边框模型：
- 给
table设置border-collapse: collapse - 再统一设置
td和th的border（推荐只设1px即可） - 避免同时设
table和td的border，否则可能因渲染优先级产生意外重叠
border-collapse: collapse 的副作用怎么处理？
启用后，border-spacing 失效，但 padding 依然有效——这是控制内容呼吸感的唯一可靠方式。很多人误以为要靠 border-spacing 来留白，其实该删掉它，改用 td, th { padding: 8px 12px; }。
立即学习“前端免费学习笔记（深入）”；
另一个易踩坑点：如果表格有 caption 或需要外边框加粗，不能依赖 table { border: 2px solid #333; }，因为 collapse 模式下外边框会和内部边框融合——此时应额外包一层 div 并设边框，或用 outline（但 outline 不占布局空间，慎用于对齐敏感场景）。
兼容性与像素级细节控制
border-collapse: collapse 在所有现代浏览器包括 IE8+ 都支持，无需前缀。但要注意两个真实问题：
- 在高 DPI 屏幕（如 macOS Retina、Windows 缩放 125%+）下，
1px可能被渲染为物理 2px，若严格要求“视觉 1px”，需用transform: scaleY(0.5)配合origin调整（仅限横向边框）或改用box-shadow模拟细线 -
th和td的border值必须完全一致（颜色、样式、宽度），否则某些浏览器（如旧版 Safari）会在交界处漏缝或错位 - 如果用了
colgroup或col设置列宽，确保它们不干扰边框渲染——col元素本身不渲染边框，但会影响td的实际尺寸计算
最简可用代码：
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #ccc; padding: 8px; background: #f5f5f5;">姓名</th>
<th style="border: 1px solid #ccc; padding: 8px; background: #f5f5f5;">年龄</th>
</tr>
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">张三</td>
<td style="border: 1px solid #ccc; padding: 8px;">28</td>
</tr>
</table>
真正难的不是写出来，而是当设计师说“这个边框要刚好比字体线细一点，且在 iPad 上不能糊”时，你得知道该去调 device-pixel-ratio 相关的 media query 还是换 background-image 方案。
