cellspacing 已被废弃,应改用 css 的 border-spacing 配合 border-collapse: separate;需重置单元格默认 padding 并注意 ie8 的 doctype 要求。

cellspacing 已被废弃,别再用了
HTML5 中 cellspacing 是非标准属性,浏览器虽仍解析它(兼容旧代码),但 W3C 明确要求用 CSS 替代。继续写 <table cellspacing="2"> 会导致校验失败、响应式失效、与 <code>border-collapse 冲突——尤其当你动态切换表格样式时,空隙会突然消失或错位。
border-spacing 必须配合 border-collapse: separate 才生效
border-spacing 不是“设了就管用”的属性,它只在 border-collapse: separate 模式下起作用。很多人写了 border-spacing: 4px 却没效果,就是因为表格默认或显式设置了 border-collapse: collapse。
- 想完全替代
cellspacing="0":必须写table { border-collapse: separate; border-spacing: 0; } - 想等效
cellspacing="6":写table { border-collapse: separate; border-spacing: 6px; }(水平垂直都是 6px) - 要分别控制:写
border-spacing: 8px 2px(注意中间是空格,不是逗号) - 单位只认
px最稳妥;em和rem在部分老浏览器中行为不一致
常见错误:和 collapse 混用、忽略默认 padding
即使 border-spacing 设置正确,表格看起来仍有“缝隙感”,大概率是以下两个原因:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
-
th和td有默认padding(通常 8–10px),这和cellspacing无关,得单独重置:th, td { padding: 0; } - 表格外层容器或
caption带了margin,误以为是单元格间距 - 用 JavaScript 动态切换
border-collapse值(比如折叠行时切 collapse,展开时切 separate)——这会让border-spacing在切换瞬间失效,造成视觉跳变
IE8 兼容要小心 doctype
IE8 支持 border-spacing,但前提是页面必须声明标准 doctype:。没写或写成 <code>..> 可能导致该属性被忽略。如果你的项目还必须支持 IE8,不要删掉 cellspacing 属性,而是采用双保险写法:<table cellspacing="0" style="border-collapse: separate; border-spacing: 0;">。
<p>真正容易被忽略的是:border-spacing 的继承性为“是”,但它只对 <code><table> 元素本身生效;子元素如 <code>tbody、tr 不会继承这个值,也不该去设——所有间距控制必须锚定在 table 上。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










