如何在HTML表格中通过border-spacing属性模拟网格间距-html教程-PHP中文网

border-spacing 是表格原生且唯一的单元格间距控制方式，仅在 border-collapse: separate 时生效，首值为列距、次值为行距，不可用百分比或负值，不等同于 padding。

如何在html表格中通过border-spacing属性模拟网格间距

border-spacing 不是“模拟”网格间距，它就是表格的原生单元格间距

border-spacing 不是 hack 或模拟手段，而是 HTML5 标准中唯一正统、语义正确、物理生效的单元格间距控制方式。它在 border-collapse: separate 模式下，真实地在相邻单元格边框外侧插入透明间隙——背景色、父容器 border、box-shadow 全部可透出，和 Grid 的 gap 在视觉目标上一致，但底层机制完全不同。

写了 `border-spacing` 却没效果？先查 `border-collapse`

浏览器只在 border-collapse: separate 时解析 border-spacing；一旦计算值为 collapse，该属性直接被忽略（DevTools 中常标为 “invalid”）。常见干扰源包括：

全局 CSS 重置（如 Normalize.css、Bootstrap 的 .table 类）
某行隐藏的 table { border-collapse: collapse; }
UI 框架组件（Ant Design、Element Plus）默认启用边框合并
你自己的样式表里写了 border-collapse: collapse 却忘了删

必须显式写：

table {
  border-collapse: separate;
  border-spacing: 8px 4px;
}

且只作用于

<table> 元素本身，写在 <code><td> 或 <code><tr> 上无效。
<h3>
<code>border-spacing: 8px 4px

到底哪边是列距、哪边是行距？

顺序固定：第一个值是列间距（水平），第二个是行间距（垂直），和 margin 四值写法无关。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

border-spacing: 8px → 列距 8px，行距也是 8px
border-spacing: 8px 4px → 列距 8px，行距 4px（不是“上下 8px，左右 4px”）
不支持 %、em、负值；单位只能是 px、rem、vw 等合法长度

别记反顺序——这是最容易手滑写错的地方，写成 4px 8px 却指望列更宽，结果行反而撑高了。

别用 `padding` 替代 `border-spacing`，它们解决的是不同问题

padding 控制的是内容到单元格边框内侧的距离，border-spacing 控制的是单元格边框外侧的真实物理间隙。混用会导致：

给 <td> 加 <code>padding 后再设 border-spacing，表格总宽度不可控（padding 累加进尺寸，border-spacing 额外撑开）
margin 对 <td> 和 <code><th> 完全无效（display 类型限制） <li>在 <code>border-collapse: collapse 下硬加 padding，会让边框“浮起”，相邻单元格对不齐

真要留白：列间空隙 → 改 border-spacing；文字离边框远 → 改 td, th { padding: 8px }。

真正容易被忽略的，是判断「你到底需要单元格之间的空隙，还是内容与边框之间的呼吸感」——这两个目标不能靠同一个 CSS 属性达成。