应直接用 CSS 的 padding 控制 td 和 th 内边距，cellpadding 已废弃且无法响应式、差异化或被 !important 覆盖；常见无效原因包括 CSS 重置覆盖、border-collapse: collapse 误判失效、font-size: 0 导致 em 计算为 0、cellpadding 不支持非像素单位，且仅 td/th 支持 padding；必须先设 table { border-collapse: collapse; }，再统一或差异化设置 td/th 的 padding，并注意 padding 与 line-height 叠加影响实际行高。

直接用 padding 控制 td 和 th，别碰 cellpadding —— 它已废弃，且无法响应式、无法差异化、无法被 !important 覆盖。

为什么写了 cellpadding 却没效果？

常见现象是 cellpadding="10" 加在

上，但文字还是紧贴边框。根本原因不是属性写错，而是：

• CSS 中写了 td, th { padding: 0; } 或重置样式（如 Normalize.css），直接覆盖了 HTML 属性
• 表格用了 border-collapse: collapse，但开发者误以为这会让 cellpadding 失效（其实不影响，只是视觉上“压缩感”强）
• 父容器设了 font-size: 0，而你用 em 写 padding，结果算出来是 0
• cellpadding 只接受整数像素值，不能写 cellpadding="0.5rem" 或百分比

padding 必须作用于 td 和 th，不是 table 或 tr

table 元素不支持 padding；tr 设了也无效，浏览器会忽略。真正起作用的只有单元格元素：

• 统一设置：td, th { padding: 8px 12px; }（上下 8px，左右 12px）
• 区分表头与数据：th { padding: 10px 16px 8px; }，td { padding: 6px 12px; }
• 首列左内边距清零：td:first-child, th:first-child { padding-left: 0; }
• 某列右侧加大留白：td:nth-child(3) { padding-right: 24px; }

border-collapse: collapse 是前提，不是可选项

不显式声明 border-collapse: collapse，padding 的行为就不可控：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 默认 border-collapse: separate 下，padding + border-spacing 会叠加，导致行高突兀、导出 PDF 错位
• 设成 collapse 后，border-spacing 失效，padding 才是唯一影响视觉疏密的变量
• 真实项目中，90% 的“内边距不对”问题都源于漏写这一条
• 正确顺序：table { border-collapse: collapse; } → 再设 td, th { padding: ... }

容易被忽略的叠加关系：padding + line-height = 实际行高

单元格内容是单行文本时，最终行高 = padding-top + line-height + padding-bottom。这个叠加在调试时经常被跳过：

• 调大 padding 却发现行高没变？大概率是 line-height 太小或被重置为 normal
• 表头和数据行高度不一致？检查是否只给 th 设了 padding，却忘了它默认 line-height 更高
• 移动端文字被截断？可能是 padding + line-height 总和超出了容器高度，尤其在 min-height 未设时

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