用border-collapse: collapse替代cellspacing="0"是唯一稳定消除表格单元格间视觉间隙的方式；cellspacing已废弃，在现代布局中常因与border、padding及font-size叠加而失效，且在border-collapse: collapse下被直接忽略。

用 border-collapse: collapse 替代 cellspacing="0" 是唯一稳定消除表格单元格间视觉间隙的方式；cellspacing 本身已废弃，在现代布局中经常失效，尤其在有 CSS 边框或嵌套 Flex/Grid 时。

为什么 cellspacing="0" 还有白缝？

常见现象是写了 cellspacing="0"，但 Safari/Firefox 里仍能看到 1–2px 缝隙。真实原因不是属性没生效，而是浏览器把 cellspacing 解释为「单元格外边距」，它和 border、padding、甚至父容器的 font-size 叠加后产生不可控渲染。

• 表格默认是 inline-block 行为，换行符或空格会被渲染成微小间隙 → 给 <table> 加 <code>font-size: 0，再给 <td> 单独设回字体大小 <li> <code>cellspacing 只在 border-collapse: separate（默认）下起作用，若全局 CSS 重置了 table { border-collapse: collapse; }，该属性直接被忽略
• 即使 cellspacing="0"，若单元格没定义边框，border-collapse: collapse 也无法合并「透明边框」→ 必须配 border: 1px solid transparent 或实色边框

border-spacing 和 cellspacing 能混用吗？

不能。二者互斥：border-spacing 只在 border-collapse: separate 下生效；一旦设了 collapse，border-spacing 完全无效，cellspacing 也被无视。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 想精细控制：用 border-spacing: 8px 4px（水平 8px，垂直 4px），cellspacing 不支持这种双值写法
• 要兼容 IE8+：border-spacing 完全可用，cellspacing 在严格模式下行为不一致
• 框架项目（如 Bootstrap/Tailwind）通常已重置 table 样式 → 直接写 cellspacing 属性大概率被覆盖，查 DevTools 就能看到 border-collapse: collapse 已生效

真正容易被忽略的间隙来源

消除 cellspacing 只是第一步。后续必须检查：

• <td> 的 <code>padding：HTML 的 cellpadding 会被 CSS padding 覆盖，且无法单独控制某一个 <td> <li>表格父容器的 <code>line-height 或 vertical-align：可能让 <table> 底部多出几像素空白 <li>相邻元素的 margin 折叠或 inline 元素换行空格：哪怕表格本身无间隙，周围布局也可能“看起来有缝”</li> <p>别只盯着 <code>cellspacing 改——它就像关水龙头却忘了修漏水的管道接口。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！