HTML表格如何调整单元格之间的空间（实用技巧）-html教程-PHP中文网

border-spacing生效的前提是显式设置table{border-collapse:separate}，否则被规范强制忽略；其第一个值控制列间距、第二个值控制行间距，仅作用于table元素，不支持百分比、em和负值。

html表格如何调整单元格之间的空间（实用技巧）

border-spacing 是唯一可靠、符合 HTML5 标准的单元格间距控制方式，但写上不等于生效——90% 的问题出在 border-collapse 被设为 collapse。

为什么 `border-spacing` 写了没反应

浏览器直接忽略它，不是你的 CSS 写错了，而是规范强制禁用：只要 border-collapse 的计算值是 collapse，border-spacing 就失效（DevTools 里可能标为 “invalid” 或根本不显示）。

别信“默认就是 separate”——Bootstrap、Normalize.css、甚至某行全局 table { border-collapse: collapse; } 都可能悄悄覆盖
必须显式写在 <table> 元素上：<code>border-collapse: separate
用 DevTools 的 “Computed” 面板确认真实值，不要只看源码有没有写
第三方 UI 库（如 Ant Design、Element Plus）的表格组件默认常为 collapse，需额外覆盖

`border-spacing` 的两个参数谁管谁

顺序固定，不可颠倒：第一个值是列间距（水平），第二个是行间距（垂直）。它不是“上下/左右”，而是“列距/行距”。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

border-spacing: 8px → 列距 8px，行距也是 8px
border-spacing: 4px 12px → 列距 4px，行距 12px（不是“左右 12px”）
不支持 %、em、负值；单位只能是 px、rem、vw 等合法长度单位
只作用于 <table>，写在 <code><td> 或 <code><tr> 上完全无效，也不继承 <h3>和 <code>padding、margin 混用时视觉错乱怎么办
border-spacing 控制的是「单元格边框外侧」的真实间隙；padding 控制的是「内容到单元格边框内侧」的距离；margin 对 <td> 和 <code><th> 完全无效——这是 display 类型决定的硬限制。 <ul> <li>想让文字离边框远点 → 改 <code>td, th { padding: 8px }
想让两列之间宽一点 → 改 table { border-spacing: 12px 0 }
给 <td> 加 <code>margin 是白忙活，浏览器会忽略
用 padding 模拟 border-spacing 会导致表格总宽不可控、边框视觉浮起、响应式错位

当 `border-collapse: collapse` 必须保留时怎么模拟间隙

不能动 border-spacing，那就绕开它：用 padding + background-clip + 边框颜色差制造“假间隙”效果，或改用 outline 在单元格外侧画虚线空隙。

给 td 设 padding: 2px，再设 background-clip: padding-box，配合浅色背景和深色边框，让 padding 区域透出背景色
用 td { outline: 1px solid transparent; outline-offset: 2px } 在边框外侧加一层透明轮廓，实现类似间隙的视觉隔离
注意：这些只是视觉模拟，无法让父容器背景真正透出，也不具备语义间距能力

真正需要单元格之间留白，就只动 border-spacing 并确保 border-collapse: separate 生效；其他所有“看起来像有间距”的做法，都会在复杂布局、响应式或嵌套表格中暴露缺陷。