应使用CSS padding设置td/th内边距，因cellpadding在HTML5中已过时：它只能全局设于table标签、仅支持px单位、无法响应式缩放且不支持!important覆盖。

直接用 padding 设置 或 元素，别碰 cellpadding —— 它在 HTML5 中已过时，且无法单独控制方向或响应式缩放。

为什么不能用 cellpadding？

虽然 cellpadding 还能在部分浏览器里“凑合用”，但它有硬伤：

• 只能写在 标签上，全局生效，没法给某一行、某一列或某个单元格单独设值
  单位固定是像素（px），不支持 em、rem、百分比等现代单位
  与 CSS 的层叠规则无关，无法被 !important 覆盖，也无法用媒体查询做响应式调整
  W3C 已明确将其标记为“obsolete”，HTML5 文档中不再推荐使用

  padding 怎么写才管用？

  关键点不是“加了 padding 就行”，而是要确保边框不撑开、样式不被覆盖。常见写法如下：

  • 统一设置所有单元格：td, th { padding: 12px; }
  • 上下左右分别控制：td { padding: 8px 16px 12px 20px; }（顺序：上 右 下 左）
  • 只调垂直方向内边距：th { padding-top: 10px; padding-bottom: 10px; }
  • 配合 border-collapse: collapse 使用，避免 padding 和 border 叠加出意外间距

  容易被忽略的兼容性细节

  实际项目里踩坑最多的地方往往不在写法本身，而在组合行为：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • border-collapse: separate（默认值）下，padding 会和 border-spacing 共同影响视觉间距；切记先设 border-collapse: collapse 再调 padding
  • 如果表格用了 display: table-cell 模拟单元格，padding 依然有效，但 vertical-align 会影响内容对齐效果
  • 某些旧版 Outlook 邮件客户端会忽略 块里的 td padding，必须改用内联样式：
  用 rem 单位时，若根字体大小动态变化（比如用户缩放页面），padding 也会跟着变——这通常是优点，但若需绝对稳定，得锁定 html { font-size: 16px; }

  真正麻烦的从来不是“怎么加内边距”，而是加完之后发现表头和数据行高度不一致、打印预览错位、或者移动端文字贴边——这些几乎都源于没同步处理 border-collapse 和 box-sizing。动手前先扫一眼 computed styles 里的 actual padding 值，比猜更可靠。

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