html5中cellspacing被废弃，须用border-collapse与border-spacing配合替代；仅设collapse不能复现cellspacing="0"效果，漏设border-spacing是常见疏忽。
HTML5 中 cellspacing 已被废弃，必须用 border-collapse + border-spacing 替代；只设 border-collapse: collapse 不足以完全复现旧版 cellspacing="0" 的视觉效果，漏掉 border-spacing 是常见疏忽。
为什么 cellspacing 在 HTML5 里不管用了
HTML5 明确移除了 cellspacing 和 cellpadding 这两个 table 属性。浏览器仍会解析它们（出于兼容性），但属于“不推荐使用”的遗留行为。W3C 规范要求用 CSS 控制间距 —— 这不是可选项，是标准实践。
直接写 <table cellspacing="0"> 虽然页面看起来没报错，但会导致：校验失败、CSS 优先级混乱、响应式布局下行为不可控。
<ul><li>旧写法：<code><table cellspacing="2"> → 单元格间强制留白 2px
<li>新写法：必须用 <code>border-spacing: 2px 设置在 <table> 上，且仅当 <code>border-collapse: separate 时生效
border-collapse: collapse 会彻底忽略 border-spacing，所以它俩是互斥关系
border-collapse: collapse 的真实作用范围
这个属性只影响「相邻边框是否共用一条线」，不控制间距。很多人误以为设了它就等于清除了所有空隙，结果发现表格还是有“缝隙感”——其实是 th/td 的默认 padding 或外层容器的 margin 在起作用。
- 必须同时设置
table, th, td { border: 1px solid #000; }才能看到合并效果 - 只给
table设border-collapse: collapse，但没给th/td加边框 → 看不出任何变化 - 如果表格有
caption或tfoot，它们的边框不会被自动合并，需单独处理
如何精准还原 cellspacing="N" 的效果
想让单元格之间保持 N 像素空隙（比如旧项目迁移），不能只靠 collapse，得切换回 separate 模式，并用 border-spacing 显式控制。
- 等效于
cellspacing="0"：table { border-collapse: separate; border-spacing: 0; } - 等效于
cellspacing="4"：table { border-collapse: separate; border-spacing: 4px; } - 横向/纵向可分别设置：
border-spacing: 2px 4px（水平 2px，垂直 4px） - 注意：
border-spacing只对border-collapse: separate有效，设成collapse后该值被忽略
容易被忽略的兼容性细节
IE8 及更早版本不支持 border-spacing，但支持 cellspacing；如果你的项目还需兼容这些老环境，就得保留 HTML 属性并用 CSS 覆盖，而不是非此即彼。
- 安全写法（兼顾旧 IE 和现代浏览器）：
<table cellspacing="0" style="border-collapse: collapse;"> <li>纯现代项目（≥IE9 / Edge / Chrome / Firefox）：去掉 <code>cellspacing，全用 CSS 控制 -
border-spacing无法应用于display: table-cell的非 table 元素，这点和cellspacing的语义完全不同
真正麻烦的不是语法转换，而是当表格嵌套在 flex/grid 容器里、或配合 transform 缩放时，border-spacing 的像素值会参与计算，而旧 cellspacing 不会 —— 这个差异在做高保真还原时最容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
