cellpadding控制单元格内容与边框距离，非文字间距；失效主因是css覆盖，应改用td/th的padding属性实现响应式、可交互的内边距控制。

cellpadding不是用来控制文字间距的

cellpadding 控制的是单元格内容与边框之间的距离，不是文字行高、字间距或字符间空隙。它影响的是整个 td 或 th 内容块的“呼吸空间”，和 letter-spacing、line-height、word-spacing 完全无关。如果你发现文字挤在一起或行距太小，调 cellpadding 不会解决——该调的是 line-height 或 font-size。

为什么给

写cellpadding="10"却没效果？

常见原因不是属性写错了，而是 CSS 覆盖了它：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 浏览器默认样式或重置 CSS（如 td, th { padding: 0; }）直接清掉了 cellpadding 的计算值
• 你写了 td { padding: 6px; } —— CSS 优先级永远高于 HTML 属性，cellpadding 彻底失效
• 表格用了 border-collapse: collapse（现代框架默认），虽然不影响 cellpadding，但容易让人误判“没反应”
• DevTools 里检查 td 元素，看 computed 样式中 padding 值是否被其他规则覆盖

用 CSS padding 替代 cellpadding 的实操要点

目标必须是 td 和 th，不是 table：

• 统一设置：td, th { padding: 8px 12px; }（上下 8px，左右 12px）
• 差异化控制：给操作列加 class，如 <td class="action-col">编辑</td>，再配 .action-col { padding: 4px 6px; }
• 响应式收缩：@media (max-width: 768px) { td, th { padding: 4px 8px; } }
• 避免用 em 单位：父容器 font-size 变动时，padding: 0.5em 会浮动，优先用 px 或 rem
• 别给 table 写 padding：它对表格整体无效，不渲染内边距

遗留项目里还看到 cellpadding，该怎么处理？

不是立刻删掉，而是分阶段过渡：

• 保留原有 cellpadding 属性，同时在 CSS 中补上等效 padding 规则，确保视觉一致
• 如果要用 JS 动态读取旧值，注意 table.cellPadding 返回的是字符串（如 "10"），需转成数字再拼 px 单位
• React/Vue 项目中禁止直接操作 cellPadding DOM 属性——它无法触发样式重绘或 transition 动画，而 padding 可以
• CI/CD 流水线若启用了 HTML 校验（如 html-validate），cellpadding 会被标为 obsolete，需提前替换

真正容易被忽略的是：即使 cellpadding 在浏览器里还能“工作”，它也完全无法响应伪类、媒体查询或 JS 状态变化；而一个简单的 td.highlighted { padding: 12px; } 就能实现交互反馈——这种灵活性不是过时属性能提供的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！