table-layout: fixed下padding“看起来没用”并非失效，而是内容溢出或盒模型压缩导致其视觉空间被覆盖；需配合box-sizing: border-box、word-break: break-word及避免white-space: nowrap等措施保障可见性。

table-layout: fixed 下 padding 为什么“看起来没用”

不是 padding 失效了，而是它被内容溢出或盒模型压缩“盖住”了。浏览器在 table-layout: fixed 模式下严格按列宽分配空间，但 padding 是内边距，属于单元格内部区域；一旦内容（尤其是无空格长文本）不换行、不截断，就会横向撑开、覆盖甚至顶掉 padding 的视觉空间。

常见错误现象：

• 给 td 设了 padding: 12px，但实际看到文字紧贴边框
• 开发者工具里 padding 值存在，computed styles 显示生效，但渲染上不可见
• 列宽固定为 120px，但内容高亮后发现文字已超出 padding 区域

哪些 CSS 组合会直接吃掉 padding 视觉效果

white-space: nowrap、overflow: hidden 单独用不致命，但和 table-layout: fixed 配合时容易让内容强行挤压内边距：

• white-space: nowrap 禁止换行 → 长文本横向拉伸，把 padding “挤扁”
• overflow: hidden 裁剪溢出 → 若未配 text-overflow: ellipsis，裁剪点可能落在 padding 内部，造成错觉
• 缺少 box-sizing: border-box → td 默认是 content-box，padding 和 width 是相加关系，列宽固定后，padding 只能靠压缩内容来“腾地方”

正确做法是显式加固盒模型与换行控制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 给 td 加 box-sizing: border-box
• 同时设 word-break: break-word 或 overflow-wrap: break-word
• 避免仅依赖 white-space: nowrap，除非你明确需要单行+省略号

为什么用 <col> 比在 th/td 上写 width 更利于保留 padding

因为 <col> 定义的是纯列轨道宽度，不参与内容渲染流程，也不受 padding、border、font-size 等样式干扰。而 th width="150" 这类写法本质是内联 width: 150px，极易被层叠样式覆盖，且浏览器在计算该宽度时，会把 padding + border + 内容宽度一并纳入“可用空间”预估，导致实际列宽浮动。

更稳的写法：

• <colgroup> <col width="120"> <col width="200"> </colgroup> 放在 <table> 开头、<code><thead> 之前<li>对应 <code>td 统一设 padding: 8px 12px; box-sizing: border-box;
• 不在 td 上再写 width 或 min-width，避免冲突

移动端或 flex 容器里，padding 被“二次压缩”的真实原因

当表格嵌在 display: flex 的父容器中，即使 table-layout: fixed 和 <col> 都到位，td 的 padding 仍可能视觉收缩——这是因为 flex item 默认有 min-width: auto，它会阻止子元素（即 table）收缩到内容最小尺寸以下，从而间接压缩列内有效空间。

此时 padding 成了最先被牺牲的部分。解决方法不是加大 padding，而是松动父级约束：

• 给表格外层容器加 min-width: 0
• 或给 table 自身加 min-width: 0
• 同时确保 td 有 max-width: 0 + overflow: hidden，才能让 padding 在窄屏下真正“站住脚”

复杂点往往不在 padding 本身，而在它所处的上下文是否允许它存在。