gap 在 上无效，因其依赖 Flex/Grid 布局模型，而表格使用独立的 table formatting context；内部间距只能通过 / 的 padding 和 border-spacing（需 border-collapse: separate）控制。

表格化布局不能用 gap —— 它对

完全无效，强行加只会被浏览器静默忽略。

为什么 gap 在

上不起作用

gap 是 display: flex 和 display: grid 的原生属性，

的渲染模型既不是 Flex 也不是 Grid，而是独立的 table formatting context。即使你给 设了 display: table（默认值）或 display: inline-table，gap 也不会生效。

常见误操作：

• 给

加 gap: 16px → 浏览器直接忽略，控制台无警告

给

或

加 gap → 语法错误，不解析

以为 border-spacing 是 gap 的等价物 → 它只控制单元格之间的“空隙”，不控制单元格内部留白，且不支持响应式单位或 clamp()

内部间距只能靠 padding 和 border-spacing

表格真正的间距控制权在两个地方：

和

的 padding：控制文字到边框的距离，支持 em、rem、px，可单独设上下左右

的 border-spacing（配合 border-collapse: separate）：控制相邻单元格之间的距离，仅接受长度值，不支持百分比

示例：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

.data-table {
  border-collapse: separate;
  border-spacing: 0 8px; /* 行间距 8px，列间距 0 */
}
.data-table td,
.data-table th {
  padding: 6px 12px;
}

注意：border-spacing 在 border-collapse: collapse 下完全失效；而 padding 在

或 上写是无效的，只对

/

生效。

想用 gap？必须先放弃 布局

如果你真需要 gap 提供的可控、无塌陷、响应式友好的间距能力，就得把表格语义和布局语义拆开：

• 语义仍用

（如数据报表、可访问性要求高的场景）→ 只能老实用 padding + border-spacing

布局目的用卡片/列表/栅格 → 改用 display: grid 或 display: flex，然后放心上 gap

混合方案：保留

语义结构，但用 CSS 把它 display 覆盖为 grid（需重写 grid-template，复杂度高，不推荐）

真正难处理的不是怎么加 gap，而是当设计稿里“表格区域”同时要求语义正确、屏幕阅读器友好、又想要 gap 那种干净间距时——你得承认：HTML 表格天生不支持现代布局层语义，这时候优先保语义，再用 padding 精调。

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