表格边框重叠是因 border-collapse 默认为 separate，使单元格边框分离且存在间距；设 border-collapse: collapse 可合并边框成单线，并消除间隙。
表格边框重叠，其实是默认情况下 border-collapse 为 separate 导致的——每个单元格都自带独立边框，相邻边框之间会留出间距，视觉上就像“双线”或“错位”。解决方法 很简单：用 border-collapse: collapse 让边框真正“挤在一起”，变成单一线条。
默认状态下，
的 border-collapse 值是 separate。这时：
- 每个
和
都有自己的一套边框（哪怕只设了 table 的 border）
- 单元格之间还有
border-spacing（默认为 2px），导致空隙或边框分离
- 横向和纵向边框交叠时，浏览器 按规则叠加显示，容易显得加粗或不整齐
给
加上这一行 CSS 就能立刻见效：
table {border-collapse: collapse;}
这样之后：
立即学习 “ 前端免费学习笔记（深入）”；
- 相邻单元格的边框会合并成一条线（取较宽、较深或更靠前的样式）
-
border-spacing 失效，不再有间隙
- 只需给 table 或 th/td 统一设 border，就能得到干净的网格线
合并后，边框样式更可控。比如：
- 想所有线条都是 1px 灰色：直接写
table, th, td {border: 1px solid #ccc;}
- 想表头加粗、内容细线：分别设置
th {border-bottom: 2px solid #333;} 和 td {border-bottom: 1px solid #eee;}，collapse 会自动融合交点
- 要去掉外边框只留内线？给 table 设
border: none，只给 th/td 设左右 / 下边框即可
极少数需要保留间距（比如做卡片式表格），就别用 collapse。此时可：
- 显式设
border-spacing: 0 消除空隙
- 统一控制 th/td 的 border，避免某几列多出一条线
- 用
outline 替代 border 避免盒模型干扰（但 outline 不支持圆角、不占布局空间）
基本上就这些。记住：做常规数据表格，border-collapse: collapse 是第一步，也是最关键的一步。
|
|
