cellspacing="0" 在现代浏览器中已不可靠,必须配合 CSS 的 border-collapse: collapse 和 border-spacing: 0 才能彻底消除表格间隙,且需避免其他样式干扰。

cellspacing="0" 还是失效?别只写 HTML 属性
直接在 <table> 标签里写 cellspacing="0" 看似简单,但现代浏览器(尤其是 Chrome 120+、Firefox 125+)对废弃属性的支持已不稳定——它可能被 CSS 的 border-spacing 覆盖,或在 strict mode 下被忽略。
真正起效的前提是:没有其他 CSS 规则干扰,且文档未启用 XHTML 模式。更稳妥的做法是用 CSS 显式控制。
border-collapse: collapse 是关键,不是可选项
仅设 cellspacing="0" 或 border-spacing: 0 不足以消除所有间隙。表格默认使用 border-collapse: separate,此时单元格边框各自独立,哪怕间距为 0,相邻边框仍会“叠加”出 1px 缝隙(尤其当有 border 时)。
必须配合 border-collapse: collapse 才能让边框真正合并成一条线,从视觉上抹掉间隙。
-
border-collapse: collapse同时影响外边框与内边框,且兼容所有主流浏览器(IE8+) - 若需保留分隔边框样式(比如只想要横向分割线),改用
border-collapse: separate+border-spacing: 0 1px(纵向留缝) - 注意:
<th>和<td>的border必须显式设为none或统一颜色宽度,否则 collapse 后可能残留色差
border-spacing 和 cellspacing 的优先级关系
当两者共存时,CSS 的 border-spacing 会覆盖 HTML 的 cellspacing 属性。也就是说,即使写了 cellspacing="0",只要 CSS 里有 table { border-spacing: 2px; },实际还是 2px 间距。
- 推荐完全弃用
cellspacing和cellpadding,改用 CSS:border-spacing: 0控制单元格间距,padding: 0控制内容内边距 -
border-spacing可接受两个值:border-spacing: 4px 2px表示水平 4px、垂直 2px;单值则表示两者相同 - 该属性只对
border-collapse: separate有效,设为collapse后自动失效
容易被忽略的继承干扰源
间隙“去不干净”,往往不是因为你没设对,而是被其他规则悄悄加回来了。常见干扰点:
立即学习“前端免费学习笔记(深入)”;
- 全局重置样式如
* { margin: 0; padding: 0; }不影响border-spacing,但它可能让<td>内容紧贴边缘,造成“假间隙”错觉 - 某些 UI 框架(如 Bootstrap 5)默认给
table设了border-spacing: 0 1px,需手动覆盖 -
<table>的父容器若有font-size: 0,可能让空格字符塌陷,意外消除间隙——但这不可靠,且影响文本可读性 - 伪元素(如
table::before)或 JS 动态插入的样式也可能注入border-spacing
最保险的排查方式:在 DevTools 中选中 <table>,看 computed 标签下 border-spacing 的最终值和来源。



















