cellspacing 和 cellpadding 已被 HTML5 废弃,应改用 CSS 的 border-spacing(作用于 table,仅在 border-collapse: separate 时生效)和 padding(作用于 td/th)控制间距与内边距。

cellspacing 和 cellpadding 已被废弃,别再用
HTML5 中 cellspacing 和 cellpadding 属性已被移除,继续写在 <table> 标签里不会生效,浏览器会忽略。很多老教程还在教这两个属性,实际项目里硬写只会让你调试半天发现“为什么没反应”。
真正起作用的是 CSS:border-spacing 控制单元格间距,padding 控制单元格内容到边框的距离。
用 border-spacing 控制单元格之间的空隙
border-spacing 只对 border-collapse: separate(默认值)有效;如果设了 border-collapse: collapse,这个属性就完全失效。
- 单值写法:
border-spacing: 8px→ 横向和纵向都设为 8px - 双值写法:
border-spacing: 4px 12px→ 先横后纵(水平间距 4px,垂直间距 12px) - 必须写在
<table>元素上,不能写在<td>或<th>上 - 不支持百分比单位,只接受
px、em、rem等绝对或相对长度
用 padding 调整单元格内容离边框的距离
padding 是标准盒模型属性,作用对象是每个 <td> 或 <th>,不是整个表格。它控制的是文字/内容和单元格边框之间的空白。
立即学习“前端免费学习笔记(深入)”;
- 推荐统一写在
td, th选择器里,避免逐个加 class -
padding: 6px 12px比padding: 6px更可控,尤其当左右需要留白、上下需要紧凑时 - 注意:如果表格用了
border-collapse: collapse,padding依然有效,但border-spacing无效 - 和
border-spacing不同,padding支持所有 CSS 长度单位,包括%(但慎用,容易错位)
border-collapse: collapse 会吃掉 border-spacing
很多人想让表格边框合并成一条线,就加 border-collapse: collapse,结果发现 border-spacing 不管用了——这不是 bug,是规范行为。合并边框模式下,单元格之间没有“间隙”概念,自然不需要 border-spacing。
- 要保留间距又想要视觉上的“合边”,可以用
outline+border组合模拟,但更稳妥的做法是保持separate并用border-spacing -
border-collapse: collapse下,相邻边框会重叠,此时border的宽度和样式优先级由“胜出规则”决定(比如border: 2px solid #000会压过1px的) - IE8+ 都支持
border-collapse,但旧版 Safari 对outline在表格中的表现不稳定,别依赖它做关键布局
border-collapse 后突然出现大缝隙,大概率是忘了配 border-spacing;加了却没变化,先检查是否误设了 collapse。表格样式看似简单,但属性之间互相压制的细节,比想象中更咬人。



















