在HTML表格中怎么通过cellspacing属性调整单元格间距

cellspacing在现代项目中常失效，主因是被border-collapse: collapse压制或CSS覆盖；应改用border-spacing配合border-collapse: separate，且需移除HTML中过时的cellspacing属性。

cellspacing 确实能调单元格间距，但它在现代项目里大概率失效——不是你写错了，而是被 CSS 覆盖或渲染模式压制了。

为什么 cellspacing 经常没反应？

最常见原因是全局或局部设置了 border-collapse: collapse。这个声明会让浏览器直接忽略 cellspacing，哪怕你写了 cellspacing="20" 也白搭。

• 检查 DevTools 中 <table> 元素计算后的 border-collapse 值，如果是 collapse，cellspacing 就彻底失效
• 框架（如 Bootstrap）或重置样式表（如 normalize.css）常默认设 table { border-collapse: collapse; }
• cellspacing 只在 border-collapse: separate（默认值）下才起作用
• 如果 <table> 被设了 display: grid 或 display: block，它已脱离表格渲染上下文，cellspacing 完全不参与布局

cellspacing 的写法和限制

它只能写在 <table> 标签上，值是单个非负整数（像素），不支持单位后缀、百分比或双值写法。

• cellspacing="8" → 所有方向（横向列间 + 纵向行间）都是 8 像素
• cellspacing="0" 是合法且常用，用于消除默认间隙（但注意：IE 默认是 2，Chrome/Firefox 通常也是 2）
• 不能写成 cellspacing="8px" 或 cellspacing="8 12"，会解析失败或退化为 0
• HTML5 规范中已标记为“过时（obsolete）”，不是废弃，仍可运行，但不鼓励新用

当 cellspacing 失效时，该用什么替代？

优先改用 CSS 的 border-spacing，行为一致但可控性更强，还能分设行列。

立即学习“前端免费学习笔记（深入）”；

• 确保 <table> 没有 border-collapse: collapse；如有，删掉或显式写 border-collapse: separate
• 给 <table> 加样式：border-spacing: 6px 12px → 第一个值是列间距（水平），第二个是行间距（垂直）
• 如果必须用 border-collapse: collapse（比如要实现无缝边框），那就放弃 border-spacing，改用 td, th { padding: 8px; } 控制内容留白
• 务必移除所有 cellspacing 和 cellpadding 属性——它们会和 CSS 冲突，浏览器以 HTML 属性为准，CSS 可能被静默覆盖

真正麻烦的不是不会写 cellspacing，而是它藏在旧代码里，和新 CSS 一起生效时，谁赢谁输得看具体选择器权重和是否触发 border-collapse 切换——这点最容易被忽略。