应使用CSS padding设置td/th内边距，因cellpadding在HTML5中已过时：它只能全局设于table标签、仅支持px单位、无法响应式缩放且不支持!important覆盖。
直接给 td 和 th 设 padding，别碰 cellpadding
cellpadding 是 HTML4 的遗留属性，浏览器虽还认，但 HTML5 中已标记为 obsolete。它写在
<table> 上，只能设一个整数（如
cellpadding="8"），四边等距、无法响应式、不能单独控制上下或左右，而且会被 CSS 覆盖——你改了它，别人加一行
td { padding: 12px 16px; } 就全失效。
真正可控的做法是直接操作单元格元素：
-
td, th { padding: 8px 12px; }：上下 8px，左右 12px（2 值语法）
-
th { padding: 10px 16px 6px; }：上 10px、左右 16px、下 6px（3 值语法）
- 想让表头更宽松、数据行紧凑些？分开写：
th { padding: 12px; } td { padding: 6px 10px; }
注意：
<table> 元素本身设
padding 没用——表格不是常规块级容器，它的内边距不生效。
border-collapse: collapse 会影响 padding 的视觉效果
默认情况下，表格的
border-collapse 是
separate，此时单元格之间有间隙（由
border-spacing 控制），
padding 只管自己内部；一旦设成
collapse，相邻边框合并，
padding 就成了唯一能拉开内容与边框距离的手段，视觉上更干净利落。
常见错误：
- 设了
border-collapse: collapse 却忘了重置 border-spacing: 0，结果某些浏览器（如旧版 Safari）仍留缝隙
- 用了
collapse 后又误加 border-spacing，后者直接失效，白写
- 给
tr 设 padding——无效，tr 不接受内边距，必须落在 td/th 上
文字“挤在一起”时，优先调 line-height，不是狂加 padding
如果单元格里文字看起来太密、行距小，直接增大
padding 容易撑开整行高度，导致相邻行错位或表格变形。更精准的解法是：
-
td, th { line-height: 1.5; }：按字体大小比例控制行高，不影响左右间距
- 需要最小高度保障？用
min-height，比如 td { min-height: 36px; }
- 若文字含图标或换行内容，
padding + vertical-align: middle 配合使用更稳
记住：
padding 是“内容到边框”的距离，
line-height 才管“行与行之间”的松紧。混用时留意盒模型叠加效果——比如
padding-top: 10px +
line-height: 1.5（字体 14px）实际顶部留空约 10 + (1.5×14−14)/2 ≈ 13.5px。
响应式场景下，padding 要配合媒体查询动态缩放
移动端窄屏时，固定
padding: 12px 容易把单元格撑出横向滚动条。安全做法是：
- 用相对单位：
td { padding: 0.5em 0.75em; }，随字号缩放
- 断点降级：
@media (max-width: 768px) { td, th { padding: 4px 8px; } }
- 避免在
td 上用 rem 或 vh——它们依赖根字号或视口，容易在嵌套表格里失准
特别注意：如果表格父容器用了
overflow-x: auto，
padding 过大会让内容超出可视区，此时宁可牺牲一点内边距，也要保横向可滚动性。
真正麻烦的从来不是怎么设
padding，而是忘记它和
line-height、
border-collapse、
font-size 之间的联动关系——调一个值，得看三个地方。
