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