根本解法是同时设置 table { border-collapse: collapse; } 和 td, th { box-sizing: border-box; padding: 12px; }，否则 padding 因分离边框或 content-box 盒模型被掩盖。
表格单元格的 padding 不是“失效”，而是被盒模型和边框渲染逻辑掩盖了——根本解法不是调 padding 值，而是先确保 border-collapse 和 box-sizing 同时就位。
为什么 td 设了 padding 却没反应
常见现象：写了 td { padding: 12px; }，但单元格内容紧贴边框，或上下留白不一致。这不是 CSS 被忽略，而是以下任一原因在起作用：
-
table没设border-collapse: collapse，导致浏览器按默认separate模式渲染，此时border-spacing（等效于旧cellspacing）会覆盖padding的视觉表现 -
td的box-sizing是默认的content-box，而你又同时设置了固定width/height，padding就只能往内容区外“撑”，但表格布局引擎可能直接裁剪或压缩内容 - 某些重置样式（如
normalize.css）把table的border-collapse强制设为separate，且未暴露可覆盖点
border-collapse: collapse 必须写在 table 上，且要配边框
这个属性只对 <table> 元素生效，写在 tr、td 或外层 div 上完全无效。更关键的是：collapse 模式下，边框合并效果只有在 td 和 th 显式定义了 border 时才可见。
- 错误写法：
td { border-collapse: collapse; }→ 无任何效果 - 正确写法：
table { border-collapse: collapse; }+td, th { border: 1px solid #ccc; padding: 8px; } - 如果只想有内边距、不要边框，仍需给
td设一个透明边框：border: 1px solid transparent;，否则合并逻辑可能退化为“无边框区域”，padding视觉权重下降
必须加 box-sizing: border-box 到 td 和 th
表格单元格默认用 content-box 盒模型，这意味着你设的 width: 100px 和 padding: 12px 会叠加出 124px 宽度——而表格布局引擎常强制收缩，造成 padding 被“吃掉”或文本换行异常。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
td, th { box-sizing: border-box; padding: 12px; } - 若项目已全局启用
* { box-sizing: border-box; }，仍建议显式加到td, th，因为部分老版 reset 会重置该规则 - 避免只对
table设box-sizing——它不影响子元素，td才是承载padding的主体
响应式表格里 padding 突然变小或错位
当配合 table-layout: fixed 或隐藏列（visibility: collapse）时，padding 容易因列宽重算而被挤压，尤其在小屏下。
- 给
td加min-width: 0，防止内容（如长单词或 URL）强行撑开列宽，反向压缩padding - 避免在
col或colgroup上设width同时又在td写padding——两者冲突时，浏览器优先保列宽，padding可能被截断 - 用
word-break: break-word或overflow-wrap: break-word替代单纯依赖padding控制留白，尤其处理不可换行内容时
真正容易被忽略的点是：border-collapse: collapse 和 box-sizing: border-box 必须成对出现，缺一不可；单独改其中一个，padding 在多数真实表格场景中依然“看不见”。
