表格边框重叠是因border-collapse默认为separate，使单元格边框分离且存在间距；设border-collapse: collapse可合并边框成单线，并消除间隙。
表格边框重叠，其实是默认情况下 border-collapse 为 separate 导致的——每个单元格都自带独立边框，相邻边框之间会留出间距，视觉上就像“双线”或“错位”。解决方法很简单：用 border-collapse: collapse 让边框真正“挤在一起”，变成单一线条。
为什么边框看起来是重叠或加粗的？
默认状态下，<table> 的 border-collapse 值是 separate。这时：
- 每个
<td>和<th>都有自己的一套边框（哪怕只设了 table 的 border） - 单元格之间还有
border-spacing（默认为 2px），导致空隙或边框分离 - 横向和纵向边框交叠时，浏览器按规则叠加显示，容易显得加粗或不整齐
用 collapse 合并边框（最常用方案）
给 <table> 加上这一行 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 设左右/下边框即可
慎用 separate 模式下的替代方案
极少数需要保留间距（比如做卡片式表格），就别用 collapse。此时可：
- 显式设
border-spacing: 0消除空隙 - 统一控制 th/td 的 border，避免某几列多出一条线
- 用
outline替代border避免盒模型干扰（但 outline 不支持圆角、不占布局空间）
基本上就这些。记住：做常规数据表格，border-collapse: collapse 是第一步，也是最关键的一步。
