cellpadding不管用是因为css的padding样式覆盖了它，且该属性在html5中已被标记为obsolete（过时），w3c不再推荐使用；真正生效的是作用于td/th元素的css padding，支持多方向、响应式及单位灵活控制。
table 的 cellpadding 属性为什么不管用
写了 cellpadding 却没效果，不是你写错了，而是 CSS 的 padding 覆盖了它——现代浏览器优先执行样式表里的规则，HTML 属性在层叠中天然弱势。
更关键的是：cellpadding 是 HTML4 遗留属性，HTML5 中已标记为 obsolete（过时），W3C 不再推荐使用，校验器会报 warning，且无法响应式、无法单独控制上下左右。
- 想快速验证：删掉所有 CSS 里对
td、th的padding声明，再看cellpadding是否生效 - 真要兼容极老环境（如 IE6–8），可保留
cellpadding作降级，但主逻辑必须用 CSS - 别用
!important强行“救活”cellpadding——这等于把样式逻辑锁死在 HTML 层，后续维护成本翻倍
用 CSS padding 精确控制内容到边框距离
padding 才是当前唯一可靠、灵活、可维护的方式。它作用于 td 和 th 元素，直接定义内容区域与单元格边框之间的空白。
示例代码：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
td, th {
padding: 8px 12px; /* 上下 8px，左右 12px */
}
/* 或单独控制下边距（比如让文字离下边框远一点）*/
td.bottom-spaced {
padding-bottom: 16px;
}
-
padding支持px、rem、em、vw等单位，能配合媒体查询做响应式调整 - 给
table元素设padding是无效的——表格不是块级容器，不接受内边距 - 如果用了
border-collapse: collapse，padding依然完全有效；它和边框合并逻辑互不干扰
border-spacing 和 padding 容易混淆的边界在哪
很多人调了半天发现“间距没变”，其实是搞混了两层空间：padding 控制的是「内容 → 单元格边框」，border-spacing 控制的是「单元格边框 → 相邻单元格边框」——它们物理上完全隔离，不能互相替代。
- 想让文字离上边框远点 → 改
td { padding-top: 10px } - 想让第一列和第二列之间空出 20px → 改
table { border-spacing: 20px 0 }，且必须确保border-collapse: separate - 给
td加margin是徒劳的——表格单元格的 display 类型（table-cell）不支持 margin，浏览器直接忽略 - 用
padding模拟border-spacing会导致表格总宽度失控，尤其在固定布局（table-layout: fixed）下极易错位
为什么有时 padding 看起来“撑不开”行高
加了 padding-bottom: 20px，但文字还是贴着下边框？大概率是 line-height 过小或单元格高度被其他规则压制。
-
padding确实会增加单元格高度，但若父级tr或table设了height、max-height或vertical-align，可能截断或压缩视觉表现 - 优先检查
tr是否有height固定值，或table是否启用了table-layout: fixed并设置了列宽 - 真正影响文字垂直居中的是
vertical-align（默认middle），不是padding；若需底部对齐，可加vertical-align: bottom
实际项目里最容易被忽略的，是 border-collapse 的隐式覆盖——某处全局 CSS 或 UI 库（比如 Ant Design 的 .ant-table）悄悄设了 border-collapse: collapse，结果你写的 border-spacing 从一开始就没机会执行。调试时务必打开 DevTools 的 Computed 面板，盯着 border-collapse 的真实计算值看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
