怎样设置HTML表格的边框重叠？BORDER-SPACING属性应用

要让表格边框重叠，必须使用 table { border-collapse: collapse; }，border-spacing 在 collapse 模式下无效且互斥；它仅在 separate 模式下生效，且必须作用于 table 元素，td/tr/div 上设置无效。

直接说结论：想让表格边框重叠（即消除单元格之间的缝隙、避免双线），border-spacing 不但没用，反而会干扰目标效果；真正起作用的是 border-collapse: collapse，且必须写在 table 元素上。

为什么加了 border-spacing 却没反应？

因为 border-spacing 只在 border-collapse: separate（默认值）下才生效。一旦你设了 border-collapse: collapse，border-spacing 就被浏览器完全忽略——它俩是互斥开关，不是叠加关系。

• 常见错误：写成 table { border-collapse: collapse; border-spacing: 0; }，以为能“双重保险”，结果 border-spacing 白写了
• 更隐蔽的问题：UI 框架（如 Ant Design）可能全局重置了 table 的 border-spacing，但没改 border-collapse，导致你加了 collapse 却仍看到缝隙
• 验证方法：打开开发者工具，检查 table 元素的 computed 样式，确认 border-collapse 确实是 collapse，且没有被更高权重的规则覆盖

border-collapse: collapse 必须作用于 table 元素

写在 td、tr 或外层 div 上完全无效，浏览器会静默丢弃。这不是兼容性问题，而是 CSS 规范明确限定的作用域。

• 正确写法：table { border-collapse: collapse; } 或 <table style="border-collapse: collapse">
• 错误写法：td { border-collapse: collapse; }、.wrapper { border-collapse: collapse; } —— 这些都不会生效
• 如果用了框架，建议加类名提高权重，比如 .my-table { border-collapse: collapse; }，而不是依赖 !important

合并后边框粗细/颜色不对？其实是“边框竞争”规则在起作用

border-collapse: collapse 不是取平均或透明叠加，而是让相邻边框按三重优先级“竞选”出唯一胜出者：宽度最大 > 样式更实（solid > dashed > dotted）> 声明顺序靠后。

立即学习“前端免费学习笔记（深入）”；

• 例如：th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，横向线显示为 2px solid #333
• 但如果 td 的规则写在后面，且宽度相同、样式相同，它的颜色就可能覆盖 th 的
• 最稳妥做法：统一设置 th, td { border: 1px solid #ccc; }，避免交界处粗细突变

真正容易被忽略的点是：即使加了 collapse，如果 table 自身没设 border（哪怕 border: 1px solid transparent），外框会“消失”，只留下内部双线错觉；而 th 和 td 的边框值不一致（比如一个 1px，一个 2px），交界处必然加粗。这些细节不调，光靠 border-spacing: 0 是救不回来的。