gap 在标准 HTML <table> 元素上完全无效；表格布局不属于 Flex、Grid 或多列布局，浏览器直接忽略 gap 相关声明；如需行列间隙，应改用 display: grid 模拟表格结构。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

HTML表格不支持gap属性，别往

上写

直接说结论：gap 在标准 HTML <table> 元素上完全无效。表格布局（display: table 及其子元素）不属于 Flex、Grid 或多列布局，因此 gap、row-gap、column-gap 都不会生效——浏览器会直接忽略这些声明，连 warning 都不报。

想用gap就得换成display: grid，而不是<table>

如果你的目标是“有行列间隙的表格状布局”，真正可行的做法是放弃语义化 <table>，改用 div + display: grid 模拟：

• 把每行当作一个 grid-row，每格当作 grid-column 里的子项
• 父容器设 display: grid 和 grid-template-columns（例如 repeat(4, 1fr)）
• 用 gap: 8px 12px 控制行距和列距——第一个值是行间距，第二个是列间距
• 如果需要表头固定或滚动，得靠 position: sticky + grid-row 手动控制，不是原生 <thead> 那套逻辑

为什么不能给<td>加margin来“模拟gap”

在真实 <table> 中给 <td> 加 margin 是无效的——表格单元格不响应 margin，这是 CSS 表格渲染模型的硬性限制。你看到的“间隙”只能通过以下方式间接实现：

• border-spacing：仅对 border-collapse: separate 生效，且同时作用于横向和纵向，无法单独控制行列
• padding：在 <td> 上设 padding，但这是内边距，会撑大单元格内容区，不是“间隙”本身
• empty-cells: show + 透明边框：绕弯路，维护成本高，且无法响应式缩放

兼容性陷阱：Safari 14.1–15.6 对 Flex gap 的限制也影响 grid 模拟表

虽然 Grid 的 gap 在 Safari 14.1+ 基本可用，但如果你用的是 display: inline-grid 或嵌套了 subgrid，部分旧版 Safari 仍可能丢弃 gap 值。更隐蔽的问题是：

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

• 写了 gap: 1rem，但在 Safari 中显示为 normal（约 1em），因为 rem 单位解析不稳定
• 用 calc() 嵌套在 gap 里（如 gap: calc(1rem - 2px) 16px），Chrome/Firefox 支持，但 Safari ≤15.6 不认
• 如果外层容器用了 overflow: hidden，Firefox 曾有 bug 导致 gap 被截断（已修复，但老版本仍存在）

真要兼容 IE 或极老 Safari，别碰 gap——老老实实用 border-spacing 配合 table，或者彻底转向 JS 渲染的虚拟表格库。现代项目里，用 grid + gap 是最干净的解法，但前提是接受它和语义化表格无关。