border-spacing的第二个值是唯一真正控制表格行距的方式，需配合border-collapse: separate且作用于table元素；其他如margin、line-height等均无效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
border-spacing 是唯一真正生效的行距控制方式
想调表格行距，别碰 margin、line-height 或 padding —— 它们改的不是行与行之间的物理距离。只有 border-spacing 的第二个值，才严格控制相邻 <tr> 上下边框之间的空隙。但前提是：<code>border-collapse 必须为 separate，且该样式必须写在 <table> 元素上。
<p>常见失效原因：</p>
<ul>
<li>没显式写 <code>table { border-collapse: separate; }，被 Normalize.css、Ant Design 或项目全局样式悄悄覆盖成 collapse
border-spacing 写在 <tr> 或 <code><td> 上，完全无效
<li>用了单值写法如 <code>border-spacing: 12px，这只会设列距，行距仍为 0% 或 em，浏览器直接忽略该声明怎么快速验证和修复 border-spacing 不生效
打开 DevTools → 选中 <table> → 切到 “Computed” 面板，直接搜索 <code>border-collapse 和 border-spacing。如果 border-collapse 显示为 collapse 或标灰/invalid，说明它已被覆盖。
临时调试可加内联样式：
立即学习“前端免费学习笔记（深入）”；
<table style="border-collapse: separate; border-spacing: 0 8px;">
上线前应改为高优先级 CSS 规则，例如：
table[data-row-spacing] {
border-collapse: separate !important;
border-spacing: 0 8px;
}
然后在 HTML 中写 <table data-row-spacing>，避免滥用 <code>!important。
想让表头和第一行内容之间有更大间距？只调 border-spacing 第二个值
<thead> 和紧随其后的 <code><tbody><tr> 之间的空隙，就是 <code>border-spacing 的第二个值（行距）所控制的。不需要额外 hack。
错误做法：
- 给
<th> 加 <code>padding-bottom：只撑开单元格内部，不改变<thead> 和 <code><tbody> 的相对位置 <li>给 <code><tr> 加 <code>margin：display: table-row完全忽略margin - 插入空
<tr>：语义错误，可访问性差，打印时可能出问题 <p>正确写法示例（统一控制所有行间距离，含表头与内容）：</p> <pre class='brush:php;toolbar:false;'>table { border-collapse: separate; border-spacing: 0 10px; } th, td { padding: 8px 12px; }</pre> <h3>需要某几行间距不同？别硬套原生表格</h3> <p>原生 <code><table> 的 <code>border-spacing是表格级统一配置，无法按行差异化设置。强行用空行、伪元素或 JS 插入 DOM，都会破坏语义、增加维护成本、影响屏幕阅读器。更实际的替代方案：
- 用
display: grid模拟表格结构：grid-template-columns控制列宽，每行grid-row可独立设margin-bottom - 用
display: flex+flex-direction: column做垂直列表，每个 item 是一行数据，gap直接控制行距 - 嵌套表格：外层
<table> 设大 <code>border-spacing，每行用独立<table> 包裹内容——但 DOM 层级深，CSS 调试变复杂 <p>真正麻烦的不是参数怎么写，而是得先分清：你要的到底是「单元格边框之间的空隙」，还是「内容到边框的距离」。弄混这两者，调再多次样式也解决不了问题。</p> </table>
- 用
