table 默认没有 cellspacing 和 cellpadding,现代 HTML5 中二者已废弃;真正影响间距的是 border-spacing、padding 和 border-collapse;清除默认间距需同时设置 border-collapse: collapse、border-spacing: 0 和 padding: 0。

table 默认有 cellspacing 和 cellpadding 吗?
现代 HTML5 中,cellspacing 和 cellpadding 已是废弃属性,浏览器仍兼容但不推荐使用。真正影响表格“间距”的是默认的 border-spacing(控制单元格间距离)和 padding(控制单元格内边距),还有 border-collapse 的取值决定是否合并边框。
用 CSS 清除表格默认间距最可靠的方式
只靠重置 cellpadding 或删掉 cellspacing 不够,必须用 CSS 显式覆盖:
-
border-collapse: collapse—— 让相邻边框合并,消除单元格之间的缝隙(这是最关键的一步) -
border-spacing: 0—— 即使没设collapse,也要兜底清空间距(部分场景如separate模式下生效) -
td, th { padding: 0 }—— 清除单元格内部默认填充(常见值是 2px–10px,不同浏览器略有差异)
示例代码:
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
}
为什么有时候加了 collapse 还有白边?
常见原因不是表格本身,而是:
— 表格父容器有 font-size: 0 缺失或未处理(inline 元素间的换行符/空格会渲染为小间隙)
— th 或 td 被设置了 line-height 或 vertical-align 导致内容撑开
— 表格用了 background-color,但边框颜色与背景色不一致,视觉上像“留白”
— 某些 UI 框架(如 Bootstrap)给 table 加了默认 margin-bottom 或 border
排查时优先检查 computed styles 中的 border-spacing、padding 和 line-height 是否真为 0。
立即学习“前端免费学习笔记(深入)”;
要不要保留 border-collapse: separate?
要保留,仅当你需要「单元格之间留空隙 + 独立边框」,比如设计带间隔的卡片式表格。此时必须显式设 border-spacing: Xpx Ypx,否则不同浏览器默认值不一致(Chrome 是 2px,Firefox 是 0)。但绝大多数“清除间距”需求,collapse 是唯一稳妥选择。
复杂点在于:一旦用了 collapse,border-radius 对 table 无效,圆角得靠 th:first-child、td:last-child 等单独设置,而且得配合 overflow: hidden 才能裁切。



















