border-collapse: separate 必须显式声明，否则 border-spacing 无效；其第二个值控制表头与首行内容的垂直间距，仅接受 px/rem/vw 等长度单位，不支持 % 或负值。

table 的 border-collapse: separate 必须显式声明

不写这句，border-spacing 就是摆设。浏览器默认值虽为 separate，但几乎所有现代 CSS 重置方案（如 Normalize.css）、UI 框架（Ant Design、Element Plus）甚至团队内部基础样式都会悄悄加上 table { border-collapse: collapse; }。一旦生效，border-spacing 被规范强制忽略，DevTools 的 Computed 面板里会标成灰色或显示 invalid。

实操建议：

• 直接在 标签上加内联样式：
  或在 CSS 中优先级足够高处覆盖：table { border-collapse: separate !important; border-spacing: 0 8px; }（仅调试时用 !important，上线前应理清层叠顺序）
  检查 DevTools 的 Computed 标签页，确认 border-collapse 的最终计算值确实是 separate，别只看源码有没有写

  border-spacing 的第二个值控制表头与第一行内容的垂直间距

  border-spacing 接收两个长度值：第一个是列间距（水平），第二个才是行间距（垂直）。而“表头与内容之间”的空隙，本质就是

  和紧随其后的 第一行 之间的行间距——也就是第二个参数。

  常见错误现象：

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  • 写了 border-spacing: 8px → 表头和内容间没变化，因为这是单值写法，只设了列距，行距仍为 0
  • 写了 border-spacing: 8px 12px 但觉得“上下太松”，其实是把顺序记反了，误以为第二个值是列距
  • 用了百分比或 em → 浏览器直接忽略该声明，border-spacing 只接受合法长度单位（px、rem、vw 等），不支持 % 或负值

  th 和 td 的 padding 影响的是内容到边框的距离，不是表头与内容的间隙

  有人试图通过加大 th 的 padding-bottom 或 td 的 padding-top 来“撑开”表头与首行内容，这会导致视觉错乱：两者的 padding 是各自独立作用于单元格内部的，不会改变

  和 的物理位置关系，反而容易让文字悬浮、边框断裂、响应式布局偏移。

  正确做法：

  • 统一用 border-spacing 控制行间距（即表头与内容的间隙）
  • 用 th, td { padding: 6px 12px; } 控制文字离边框的距离，保持呼吸感
  • 不要给 th 单独加 margin-bottom ——
  或嵌套表格时，border-spacing 依然只作用于直接子

  如果表格结构复杂，比如用了多层

  （实际不合法，但有人误写），或在
  是表格单元格，margin 对它完全无效

  多个

  里又嵌了一个表格，border-spacing 仅对最外层 的直接子 生效。内层表格需单独设置自己的 border-spacing 和 border-collapse。

  容易被忽略的点：

  • border-spacing 不继承，写在父

  上，不会影响里面嵌套的

  若外层表格用了 collapse，内层即使设了 separate 也可能因盒模型干扰导致间距渲染异常，建议嵌套表格单独提取、解耦样式

  当需要表头固定、内容滚动时，border-spacing 仍有效，但需确保

  和 是同一 的子元素，而非拆成两个独立表格

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！