cellspacing 属性在 HTML5 中已废弃,必须用 CSS 的 border-collapse: separate 配合 border-spacing 控制单元格间距;border-spacing 只对 table 元素生效,不支持百分比,且在 collapse 模式下失效。

cellspacing 属性在现代 HTML 中已废弃
直接用 cellspacing 设置表格单元格间距是过时做法,HTML5 不再支持该属性,浏览器虽可能兼容但行为不可靠,尤其在不同渲染引擎下表现不一致。现在必须用 CSS 控制。
用 border-collapse: separate 配合 border-spacing
这是控制单元格间距的正确方式,border-spacing 只在 border-collapse: separate 时生效(默认值就是 separate,但显式声明更稳妥)。
常见错误:忘记设 border-collapse,或误以为 padding 能替代单元格间距 —— padding 控制的是内容到边框的距离,不是单元格之间的空隙。
-
border-spacing接受一个或两个长度值:border-spacing: 4px(横向纵向均为 4px),border-spacing: 4px 8px(横向 4px,纵向 8px) - 只对
<table>元素生效,不能写在<td>或<th>上 - 不支持百分比值,只接受
px、em、rem等绝对/相对单位 - 如果表格有
border-collapse: collapse,border-spacing完全失效
<table style="border-collapse: separate; border-spacing: 6px;">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
想让某些行/列间距不同?不行,但可绕过
border-spacing 是表格级统一设置,无法单独指定某行或某列的间距。如果需要视觉上“不等距”的效果,常见做法是:
立即学习“前端免费学习笔记(深入)”;
- 用嵌套表格:外层控制整体间距,内层表格自身无间距
- 放弃表格语义,改用
display: grid或flex布局模拟表格结构,获得完全控制权 - 用
margin+display: inline-block模拟单元格(仅适用于简单场景,语义和可访问性会受损)
注意:试图用 padding + background 伪造间距容易在边框交叠、选中高亮时出视觉 bug。
兼容性与移动端注意事项
border-spacing 在所有现代浏览器(Chrome/Firefox/Safari/Edge)中支持良好,包括 iOS Safari 和 Android Chrome。但 IE8 及更早版本不支持 —— 如果还需兼容这些老环境,只能退回到 cellspacing(并接受其不稳定行为)。
移动端尤其要注意:小屏下过大的 border-spacing(如 12px)会导致表格溢出视口,建议搭配 overflow-x: auto 或使用响应式断点重置间距值。
真正容易被忽略的是:当表格包含 <colgroup> 或 <col> 时,border-spacing 依然只作用于单元格之间,不会影响列宽计算逻辑 —— 别指望它能“撑开”列宽。



















