如何给HTML表格的单元格设置内边距-html教程-PHP中文网

应使用CSS padding设置td/th内边距，因cellpadding在HTML5中已过时；需直接为td和th设padding，配合border-collapse: collapse使用，并优先调line-height优化文字密度。

如何给html表格的单元格设置内边距

直接给 `td` 和 `th` 写 `padding`，别碰 `cellpadding`

HTML5 中 cellpadding 已标记为 obsolete（过时），它只能写在

 上、四边等距、单位固定为像素、无法响应式、也不能被 !important 覆盖。哪怕你写了 cellpadding="12"，只要 CSS 里有一行 td { padding: 8px; }，它就彻底失效——不是“叠加”，而是被取代。真正可控的做法是直接作用于单元格元素：


td, th { padding: 6px 12px; }：上下 6px，左右 12px（2 值语法）

th { padding: 10px 16px 6px; }：上 10px、左右 16px、下 6px（3 值语法）
想区分表头和数据行？分开写：th { padding: 12px; } + td { padding: 6px 10px; }

单个单元格特殊处理：

`border-collapse: collapse 必须配合 padding 一起用`

默认情况下表格是 border-collapse: separate，此时 padding 只管单元格内部，而单元格之间的空隙由 border-spacing 控制。一旦你设了 border-collapse: collapse，相邻边框会合并，border-spacing 失效，padding 就成了控制内容与边框距离的唯一手段。

常见错误：


只加 padding 却没设 border-collapse: collapse，结果视觉上还是松散、边框重叠不干净
设了 collapse 却忘了清掉 border-spacing，某些旧版 Safari 仍残留缝隙
给 tr 写 padding——无效，tr 不接受内边距

`移动端和文字密度问题，别只靠 padding`

文字“挤在一起”时，盲目加大 padding 容易撑开整行高度，导致相邻行错位或表格变形。更精准的解法是：


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


调 line-height：td, th { line-height: 1.5; }，按字体大小比例控制行高，不影响左右间距
需要最小高度保障？用 min-height：td { min-height: 36px; }

响应式窄屏下，固定 padding: 12px 容易撑出横向滚动条，改用相对单位：td { padding: 0.5em 0.75em; }

邮件客户端（如 Outlook）常忽略  中的 td 样式，必须用内联：

关键列

检查 computed styles 比猜更可靠

动手前打开 DevTools，选中任意一个 td 元素，看 computed 样式里的 padding 值来源——是来自你的 CSS，还是浏览器默认值，或是被某条全局样式覆盖。尤其要注意框架（如 Bootstrap）或重置样式表（reset.css）是否已预设了 td, th { padding: 0.5rem; }，这种声明优先级往往比 cellpadding 高得多。

真正容易被忽略的点：一旦用了任一 CSS padding 声明，cellpadding 就完全退出舞台；它不是“备用方案”，而是被层叠规则直接剔除。