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

表格化布局不能用 gap —— 它对 <table> 完全无效，强行加只会被浏览器静默忽略。<h3>为什么 <code>gap 在 <table> 上不起作用<p><code>gap 是 display: flex 和 display: grid 的原生属性，<table> 的渲染模型既不是 Flex 也不是 Grid，而是独立的 table formatting context。即使你给 <code><table> 设了 <code>display: table（默认值）或 display: inline-table，gap 也不会生效。

常见误操作：

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

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

下载

• 给 <table> 加 <code>gap: 16px → 浏览器直接忽略，控制台无警告
• 给 <tr> 或 <code><td> 加 <code>gap → 语法错误，不解析
• 以为 border-spacing 是 gap 的等价物 → 它只控制单元格之间的“空隙”，不控制单元格内部留白，且不支持响应式单位或 clamp()

<table> 内部间距只能靠 <code>padding 和 border-spacing

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

立即学习“前端免费学习笔记（深入）”；

• <td> 和 <code><th> 的 <code>padding：控制文字到边框的距离，支持 em、rem、px，可单独设上下左右
• <table> 的 <code>border-spacing（配合 border-collapse: separate）：控制相邻单元格之间的距离，仅接受长度值，不支持百分比

  示例：

  .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 在 <tr> 或 <code><table> 上写是无效的，只对 <code><td>/<code><th> 生效。<h3>想用 <code>gap？必须先放弃 <table> 布局<p>如果你真需要 <code>gap 提供的可控、无塌陷、响应式友好的间距能力，就得把表格语义和布局语义拆开：

  • 语义仍用 <table>（如数据报表、可访问性要求高的场景）→ 只能老实用 <code>padding + border-spacing
  • 布局目的用卡片/列表/栅格 → 改用 display: grid 或 display: flex，然后放心上 gap
  • 混合方案：保留 <table> 语义结构，但用 CSS 把它 display 覆盖为 <code>grid（需重写 grid-template，复杂度高，不推荐）

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