应直接给th元素设css padding，因html5中cellpadding已过时且只能全局作用于table，无法单独控制表头；用th { padding: 10px 16px; }等css写法可精准、灵活、可维护地设置表头内边距。
直接给 th 元素设 padding，别碰 cellpadding
HTML5 中 cellpadding 已标记为 obsolete（过时），它只能写在 <table> 上，全局生效，无法单独控制表头。真正生效且可维护的做法，是像对待普通元素一样，用 CSS 的 <code>padding 作用于 th 标签本身。
th 的 padding 写法和常见组合
单独控制表头内边距，关键不是“加多少”，而是避免和其他样式冲突：
-
th { padding: 10px 16px; }—— 上下 10px、左右 16px，简洁常用 -
th:first-child { padding-left: 20px; }—— 首列表头左内边距加大，常用于对齐左侧图标或缩进 -
th:last-child { padding-right: 24px; }—— 末列表头右留白，防内容贴边 - 若表格用了
border-collapse: collapse（推荐），padding不会和边框间距叠加；若用默认的separate，得先处理border-spacing，否则视觉间距不可控
为什么表头和数据行高度不一致？
这不是 padding 没起作用，而是 th 和 td 的默认 font-weight、line-height 或 vertical-align 不同，导致实际占据高度不同。解决方法很具体：
- 统一设
th, td { vertical-align: middle; }，避免顶部对齐撑高 - 显式设
th, td { line-height: 1.4; }，防止加粗文字自动拉高行高 - 如果用了
font-size: 1.1em在th上，记得同步检查padding是否仍匹配视觉节奏——rem 单位会随根字号变化，可能放大差异 - 打印预览错位？多数情况是
padding+border在分页时被截断，加一句@media print { th, td { padding: 6px 10px !important; } }更稳妥
邮件客户端里 th 的 padding 失效怎么办
Outlook（尤其是桌面版）会忽略 <style></style> 块中的 th 样式，这是已知限制，不是你代码写错了：
- 必须改用内联样式：
<th style="padding: 12px 16px;">姓名</th> - 别依赖 class 或外部 CSS，邮件渲染引擎太老，连
!important都可能被无视 - 如果表头要居中+加粗+有内边距，全部写进一个
style属性里：style="text-align:center;font-weight:bold;padding:10px 14px;" - 移动端邮件客户端（如 iOS Mail）支持稍好，但仍建议测试真实设备，别只信浏览器模拟
真正麻烦的从来不是怎么写那几行 padding，而是没意识到 th 的样式行为会因渲染环境、父级 border-collapse、甚至用户缩放而偏移——动手前看一眼开发者工具里的 computed padding 值，比凭空猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
