cellpadding虽能被浏览器解析，但html5中已列为obsolete过时属性，不推荐使用；应改用css的padding控制td/th内边距，以支持差异化设置、响应式及动态交互。
cellpadding属性还能用吗？别被兼容性骗了
能用，但不等于该用——cellpadding在浏览器里确实还能解析，但它在HTML5规范中已是obsolete（过时），不是“deprecated（废弃）”，意味着它连“过渡期”都不算，只是出于向后兼容勉强留着。W3C校验器会标黄警告，CI/CD流水线或团队ESLint配置可能直接拦截。更关键的是：cellpadding只作用于所有td和th元素，无法差异化、无法响应式、无法配合伪类动态调整。
为什么写了cellpadding="10"却没效果？
最常见原因是CSS覆盖——只要写了td, th { padding: 4px; }，哪怕只有一行，cellpadding就彻底失效。浏览器DevTools里检查td元素，看computed样式中padding值来源，大概率是某条CSS规则压倒了HTML属性。其他干扰项包括：
- 全局重置样式（如
table { border-collapse: collapse; }本身不影响cellpadding，但常伴随td { padding: 0; }） - 框架默认样式（Bootstrap、Tailwind等通常重置
td的padding） - 嵌套表格中父表的
cellpadding不会继承给子表，但子表若没设，可能被外层CSS一并影响
用CSS设置单元格内边距的实操写法
目标对象必须是td和th，不是table——给table加padding无效，它不是块级容器。常用写法：
- 统一控制：
td, th { padding: 8px 12px; }（上下8px，左右12px） - 差异化控制：
<td class="status-cell">✅</td>+.status-cell { padding: 4px 6px; } - 表头/数据分离：
th { padding: 10px 16px 8px; }+td { padding: 6px 12px; } - 响应式缩放：
@media (max-width: 768px) { td, th { padding: 4px 6px; } }
单位优先用px或rem；用em要小心，font-size变化会导致实际像素浮动。
真正在意的细节：JS动态改cellPadding没用
即使你用table.cellPadding = "12"在运行时修改，这个操作只是设置DOM属性，现代框架（React/Vue）不鼓励直操作，且无法触发CSS过渡动画。而padding可以——比如用el.style.padding = "12px"或切换class，就能配合transition: padding 0.2s做平滑变化。真正容易被忽略的是：cellpadding本质是静态、全局、不可动画的表现层逻辑，而padding才是可编程、可组合、可交互动态控制的正确入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
