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。

实操建议：

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

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

border-spacing 接收两个长度值：第一个是列间距（水平），第二个才是行间距（垂直）。而“表头与内容之间”的空隙，本质就是 <thead> 和紧随其后的 <code><tbody> 第一行 <code><tr> 之间的行间距——也就是第二个参数。 <p>常见错误现象：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>写了 <code>border-spacing: 8px → 表头和内容间没变化，因为这是单值写法，只设了列距，行距仍为 0

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

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

有人试图通过加大 th 的 padding-bottom 或 td 的 padding-top 来“撑开”表头与首行内容，这会导致视觉错乱：两者的 padding 是各自独立作用于单元格内部的，不会改变 <thead> 和 <code><tbody> 的物理位置关系，反而容易让文字悬浮、边框断裂、响应式布局偏移。 <p>正确做法：</p> <ul> <li>统一用 <code>border-spacing 控制行间距（即表头与内容的间隙）

用 th, td { padding: 6px 12px; } 控制文字离边框的距离，保持呼吸感

不要给 th 单独加 margin-bottom —— <th> 是表格单元格，<code>margin 对它完全无效

多个 或嵌套表格时，border-spacing 依然只作用于直接子

如果表格结构复杂，比如用了多层 <thead>（实际不合法，但有人误写），或在 <code><td> 里又嵌了一个表格，<code>border-spacing 仅对最外层 <table> 的直接子 <code><tr> 生效。内层表格需单独设置自己的 <code>border-spacing 和 border-collapse。

容易被忽略的点：

• border-spacing 不继承，写在父 <table> 上，不会影响里面嵌套的 <code><table> <li>若外层表格用了 <code>collapse，内层即使设了 separate 也可能因盒模型干扰导致间距渲染异常，建议嵌套表格单独提取、解耦样式
• 当需要表头固定、内容滚动时，border-spacing 仍有效，但需确保 <thead> 和 <code><tbody> 是同一 <code><table> 的子元素，而非拆成两个独立表格 </table>

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