html表格内边距应使用css padding属性设置，而非过时的cellpadding；通过作用于和元素，可实现上下左右的精确控制，支持多种单位与响应式设计，符合现代web开发中结构与样式分离的原则。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

直接用 padding 设置 td 和 th，别碰 cellpadding

cellpadding 是 HTML4 的遗留属性，W3C 已标记为 obsolete，它只能写在 <table> 上、全局生效、单位固定为 px、无法被 <code>!important 覆盖，也不支持媒体查询。实际项目里只要一加 CSS padding，cellpadding 就会被静默忽略——不是浏览器 bug，是层叠规则本就如此。

• 所有单元格统一设值：td, th { padding: 12px; }
• 上下左右分别控制：td { padding: 8px 16px 12px 20px; }（顺序：上 → 右 → 下 → 左）
• 只调表头垂直间距：th { padding-top: 10px; padding-bottom: 10px; }
• 某个单元格特殊处理：<td style="padding: 20px 4px;">重点数据</td>

border-collapse: collapse 必须先设，否则 padding 行为不可控

默认 border-collapse: separate 下，padding 和 border-spacing 会叠加影响视觉间距，容易导致行高突兀、打印错位或移动端文字贴边。真实项目中，90% 的“内边距看起来不对”问题都源于没显式声明这个。

• 正确写法：table { border-collapse: collapse; }，再设 td, th { padding: ... }
• 如果用了 border-collapse: separate（比如要保留双边框），那 border-spacing 才生效，此时 padding 仅作用于单元格内部，和间距无关
• Outlook 邮件客户端不解析 <style></style> 块里的 td 样式，必须用内联：<td style="padding: 10px;"> <h3>响应式与单位选择：rem 和百分比的坑</h3> <code>padding 支持 rem、%、em 等现代单位，但行为和预期常有偏差：
  • padding 的百分比值始终相对于包含块宽度，不是父元素高度，也不是自身宽高
  • rem 会随根字体大小变化（比如用户缩放页面），若需绝对稳定，得锁定：html { font-size: 16px; }
  • td 在 display: table-cell 模拟场景下，padding 仍有效，但 vertical-align 会影响内容对齐，容易让文字“浮起来”或“沉下去”

  真正在意的从来不是“怎么加”，而是加完之后谁在撑高表格

  padding 本身不会触发行高计算异常，但一旦和 line-height、min-height、font-size 或 box-sizing 组合，就容易出问题：表头和数据行高度不一致、导出 PDF 时错行、iOS Safari 中文字被截断。动手前，打开开发者工具看一眼 computed styles 里的 actual padding 和 height，比猜更可靠。

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