row-gap 对 <table> 无效，因其仅支持 grid/flex 布局；表格应使用 border-spacing 控制行/列间距，或改用 display: grid 模拟并启用 row-gap。
不能。 row-gap 对 <table> 元素完全无效——它只作用于 display: grid 或 display: flex（部分浏览器非标准支持，但不可靠）容器，而原生 HTML 表格是 display: table，不在规范支持范围内。
为什么 row-gap 在 <table> 上不起作用
浏览器解析 <table> 时，会强制将其渲染为 display: table 根节点，而 row-gap、gap 等属性在 CSS Display Module Level 3 规范中**明确限定仅适用于 Grid 和多列布局（columns）**，Flex 中也属后期扩展且不跨浏览器稳定。表格布局（table layout）自成一套渲染逻辑，不参与 gap 的轨道间隙计算。
常见误判现象：
- 给 <table> 直接写 row-gap: 12px，DevTools 里显示“已声明”但 computed 值为 normal 或 0px；
- 以为加了 border-collapse: separate 就能激活 row-gap —— 实际起作用的是 border-spacing，和 row-gap 无关。
替代方案：用 border-spacing 控制表格行/列间距
HTML 表格真正的“间隙控制属性”是 border-spacing，它专为 display: table 设计，语义匹配且兼容性极佳（IE6+ 支持）：
-
border-spacing: 0→ 默认无间隙（border-collapse: collapse时生效） -
border-spacing: 8px→ 行间距 = 列间距 = 8px -
border-spacing: 4px 12px→ 行间距 4px（垂直方向），列间距 12px（水平方向）
注意：
- 必须配合 border-collapse: separate 才生效（collapse 模式下 border-spacing 被忽略）；
- border-spacing 的两个值顺序是「水平 列间距 在前，垂直 行间距 在后」，和 gap 的「行先列后」相反；
- 它会影响整个表格的尺寸，且会与 cellpadding 叠加（若同时设置，总内边距 = cellpadding + border-spacing）。
如果真要 row-gap 语义，改用 display: grid 模拟表格
当需要精确控制行间距、响应式重排、或与现代布局工具链（如 CSS-in-JS、utility-first）对齐时，放弃原生 <table>，改用语义化 <div> + display: grid 是更可控的选择：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-rows: repeat(auto-fit, minmax(48px, 1fr)))替代<tr>高度逻辑 - 用
row-gap: 16px精确控制行间空隙，且不受首尾边缘影响 - 每行用
<div role="row">，单元格用<div role="cell">保持可访问性 - 避免
border-spacing的方向反序陷阱和表格固有宽度限制
关键提醒：Grid 模拟表格时，row-gap 不会自动适配内容高度变化——如果某行内容撑高，相邻间隙仍固定为设定值，而原生表格的 border-spacing 会随行高自然延展（视觉上仍是等距）。这点容易被忽略，尤其在动态文本场景下。
