应使用css padding设置td/th内边距，因cellpadding在html5中已过时：它只能全局设于table标签、仅支持px单位、无法响应式缩放且不支持!important覆盖。
直接给 td 和 th 设 padding，别碰 cellpadding
cellpadding 是 HTML4 的遗留属性，浏览器虽还认，但 HTML5 中已标记为 obsolete。它写在 <table> 上，只能设一个整数（如 <code>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> 元素本身设 <code>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 之间的联动关系——调一个值，得看三个地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
