如何设置HTML表格的边框重叠：BORDER-SPACING属性详解
border-collapse: collapse 是唯一可靠方案，必须作用于 table 元素才能生效，启用后相邻边框按宽度>样式>声明顺序优先级合并为单线，且 border-spacing 完全失效；border-spacing 仅在 separate 模式下有效，用于设置单元格间距。
border-collapse: collapse 是唯一可靠方案
想让 HTML 表格的边框“贴合在一起”，不是靠 BORDER-SPACING，而是必须用 border-collapse: collapse。这个 CSS 属性才是控制表格边框是否合并的开关，BORDER-SPACING 只在 border-collapse: separate（默认）时才生效，且作用是设置单元格间距，不是“重叠”。
常见错误：把 border-spacing: 0 当作边框合并手段——它只在分离模式下把间距设为 0，但相邻边框依然各自绘制、可能双线重叠，视觉上反而更粗、更难看。
-
border-collapse: collapse启用后，相邻单元格共用一条边框，真正“重叠”成单线 - 必须作用于
<table>元素本身，对<td>或<th>设置无效 - 一旦启用，
border-spacing完全被忽略，无论设多少都无效果
border-spacing 在什么情况下有用？
border-spacing 只在 border-collapse: separate（默认值）时起作用，本质是控制单元格之间的空白距离，单位支持 px、em 等，可接受一个值（水平=垂直）或两个值（水平 垂直）。
典型使用场景：需要带“网格感”的卡片式布局，比如数据仪表盘里每个单元格带独立阴影和留白；或者导出为 PDF 时需保留物理分隔间隙。
立即学习“前端免费学习笔记（深入）”；
- 设
border-spacing: 2px→ 水平与垂直间隙均为 2px - 设
border-spacing: 0 4px→ 水平无间隙，垂直间隙 4px（常用于表头与内容间呼吸感） - 若父容器设置了
direction: rtl，border-spacing的第一个值仍代表**内联方向**间距，不是“从左到右”
为什么 border-collapse 和 border-spacing 不能共存？
CSS 规范明确定义：当 border-collapse 为 collapse 时，border-spacing 被置为 0 且不可覆盖——这不是浏览器 bug，是标准行为。试图同时设置两者，等于一边说“我要合并边框”，一边又说“请留点空隙”，逻辑冲突。
调试时容易踩的坑：
- 在 DevTools 里看到
border-spacing被划掉，却误以为是样式没加载成功，其实是被collapse主动禁用了 - 给
<table>设了border-collapse: collapse，但某些<td>单独写了border且颜色/宽度不一致，导致合并后边框粗细或颜色突变 - 使用
colspan/rowspan的表格中，collapse模式下边框合并逻辑由浏览器自动计算，不同引擎（Chrome/Firefox/Safari）对“哪条边优先”略有差异，复杂合并单元格时建议显式用border控制关键边
实际写法推荐：从 reset 开始
避免意外边框叠加，建议表格初始化就明确边框策略。多数业务场景直接用 collapse 更可控：
table { border-collapse: collapse; border: 1px solid #ccc;}td, th { border: 1px solid #ccc; padding: 8px;}
如果真需要 separate 模式下的精细控制：
- 务必先确认
border-collapse: separate（显式写出，不要依赖默认） - 用
border-spacing配合empty-cells: show（否则空单元格可能不占位） - 注意：Firefox 对
border-spacing在table-layout: fixed下的支持更稳定，Chrome 在自动布局下偶尔有像素级偏移
边框重叠这件事，本质上是个二选一：要干净单线就用 collapse，要可控间隙就用 separate + border-spacing。混用只会增加调试成本，尤其在响应式表格或打印样式里，这点特别容易被忽略。
