如何在HTML表格中通过border-spacing属性清除单元格间的缝隙-html教程-PHP中文网

border-spacing设为0可消除缝隙，但前提是border-collapse必须为separate且未被覆盖；若计算值为collapse，则border-spacing被规范强制忽略，即使写0也无效。

如何在html表格中通过border-spacing属性清除单元格间的缝隙

border-spacing 本身不“清除”缝隙，而是控制缝隙大小；想彻底没缝，得设为 0，但前提是 border-collapse: separate 且没被覆盖。

最常见原因：浏览器根本没执行它。只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略——DevTools 的 “Computed” 面板里可能标成 “invalid”，或者压根不显示。

别信“默认就是 separate”：Bootstrap、Ant Design、甚至某行全局 table { border-collapse: collapse; } 都可能偷偷覆盖
必须显式写 table { border-collapse: separate; }，且只作用于 <table> 元素本身 <li>用 DevTools 确认 computed 值，不是看源码有没有写</li> <li>如果用了 <code>display: grid 或 display: block，border-spacing 直接失效——它只属于表格渲染上下文

设为 0 才能真正消除物理间隙，但它不是万能胶——有硬性约束：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

单位只能是长度值：border-spacing: 0、border-spacing: 0px 合法；border-spacing: 0% 或 border-spacing: 0em 会被忽略
双值写法也得是零：border-spacing: 0 0（第一个是列间距，第二个是行间距）
只写在 <table> 上，<code><td> 或 <code><tr> 上加完全无效，也不继承 <li>IE8+ 支持，现代项目基本不用操心兼容性</li> <h3>当 <code>border-collapse: collapse 必须保留时，怎么“看起来没缝”？
有些 UI 框架或旧系统强依赖边框合并逻辑，改不了 collapse。这时 border-spacing 彻底无用，只能视觉模拟：
- 给 <td> 和 <code><th> 加 <code>padding，让内容离边框远点，避免“贴边感”
- 配合细透明边框：border: 1px solid transparent，防止跨格时视觉错位
- 用 outline 替代 border（不占布局空间），再配 padding 更易控距
- Flex/Grid 布局下别硬套 border-spacing——该用 gap 或 row-gap/column-gap