应给 td 和 th 设置 padding，而非 table 或 cellpadding；因 table 不支持 padding，cellpadding 已过时且被 css padding 完全取代，后者可独立控制四边、响应式适配。

用 padding 设置 td 和 th 元素的内边距，而不是动 table 的 cellpadding 属性。

为什么不能给 table 写 padding

table 元素本身不支持 padding——这个声明会被浏览器忽略，DevTools 里也看不到生效。真正承载内容的是 td 和 th，它们才是 padding 的合法作用对象。

• 写 <table style="padding: 10px;"> 完全无效 <li> <code>cellpadding="10" 虽能工作，但属于 HTML4 过时属性，HTML5 中已标记为 obsolete
• 一旦存在任何 CSS padding 声明（哪怕只有一条），cellpadding 就被彻底覆盖，且不可回退

padding 的写法和常见误区

目标是控制「内容到单元格边框内侧」的距离，所以必须作用于 td 和 th：


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 统一设置：td, th { padding: 6px 12px; }（上下 6px，左右 12px）
• 区分表头与数据：th { padding: 10px 16px 8px; } + td { padding: 6px 12px; }
• 单独调整某个单元格：<td style="padding-left: 24px;">关键列</td>
• 别把 padding 和 border-spacing 搞混：后者控制单元格边框外侧的物理间隙，和内容距离无关

响应式与单位选择要注意什么

padding 支持 rem、em、%、calc() 等灵活单位，但要注意：

• % 是相对于包含块宽度计算的，在表格中行为不稳定，不推荐用于 td/th 的 padding
• 用 rem 更利于全局缩放控制，比如 td { padding: 0.5rem 1rem; }
• 媒体查询中可安全降级：@media (max-width: 768px) { td, th { padding: 4px 8px; } }
• 行高不足？优先调 line-height 或 min-height，盲目加大 padding 容易撑开表格、破坏对齐

最容易被忽略的一点：cellpadding 是整数像素值、四边均等；而 CSS padding 可以上下左右独立控制，还能响应式适配——但只要用了任一 CSS padding 声明，cellpadding 就彻底退出舞台，不是共存，是取代。

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