html5中cellspacing和cellpadding已废弃，应改用border-spacing（配合border-collapse:separate）替代cellspacing，用css padding替代cellpadding，兼顾语义、维护性与响应式需求。
cellspacing 和 cellpadding 已失效，别再用它们了。HTML5 中这两个属性被废弃，浏览器虽可能兼容，但不保证行为一致，且无法通过 CSS 选择器控制，维护成本高、语义差。
用 border-spacing 替代 cellspacing
它专用于控制「单元格与单元格之间的距离」，只对 <table> 生效，且必须配合 <code>border-collapse: separate（默认值）才起作用：
table {
border-collapse: separate;
border-spacing: 8px; /* 水平 + 垂直间距都是 8px */
/* 或分别设置：border-spacing: 6px 12px; （水平 垂直）*/
}
- 如果同时设了
border-collapse: collapse，border-spacing会完全失效 -
border-spacing不支持百分比，只接受长度单位（px、em、rem等） - 注意：它影响的是整个表格的单元格网格间距，不能单独给某一行或某一列设置
用 padding 替代 cellpadding
cellpadding 的本意是「内容到单元格边框的距离」，这正是 CSS 中 padding 的职责。直接作用于 td 和 th：
td, th {
padding: 12px 16px; /* 上下 12px，左右 16px */
}
- 不要只写
padding: 10px就完事——移动端小屏下左右 padding 过大会导致内容溢出，建议用min-width或word-break: break-word配合 - 如果表格有表头
th，记得单独调整它的padding，通常比td稍大一点更清晰 -
padding百分比值以父容器宽度为基准，不是高度——写padding-top: 5%却发现留白过大？那是预期行为，不是 bug
容易忽略的合并边框干扰
当使用 border-collapse: collapse 时，border-spacing 失效，单元格边框会“挤在一起”，此时看似没间距，其实是边框重叠了。这时真正影响视觉“间距感”的是：
- 单元格自身的
border-width（比如都设1px solid #ccc，合并后看起来像 1px 边框） -
td和th的padding（仍是内容呼吸感的唯一可控手段） - 若想保留“间隙感”又用
collapse，只能靠加空td或伪元素模拟，不推荐
真实项目中，90% 的现代表格布局应优先选 border-collapse: separate + border-spacing 组合，语义明确、调试直观、兼容性好。只有在需要极致紧凑边框（如数据密集型后台列表）时，才考虑 collapse，并接受它带来的间距控制限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
