table-layout: fixed 下 width 仅定义内容区宽度，padding 和 border 会额外撑大单元格导致内容压缩；必须配合 设置列宽、显式指定 table 宽度，并用 overflow-wrap 或嵌套 div 控制换行与盒模型。

table-layout: fixed 下 width 是 content-box 宽度

你设 width: 100px，浏览器只把它当内容区（content box）宽度用，不包含 padding 和 border。默认 box-sizing: content-box，所以 padding: 12px + border: 1px 会让单元格实际占位变成约 126px，但列轨道仍按 100px 分配——结果就是内容被压缩、文字挤在一起，甚至左 padding 看不见。

常见错误现象：<td style="width: 100px; padding: 16px;">文本</td> 渲染后文字贴左边界，仿佛 padding 没生效。

• box-sizing: border-box 对 <td> 本身无效（表格单元格不支持该属性） <li>可行做法：把 <code>padding 和 border 的尺寸提前算进设计余量，比如用 <col width="132"> 补足 16×2+1×2
• 更稳妥的方案：在 <td> 内嵌一层 <code><div>，再对它设 <code>box-sizing: border-box 和 width: 100%

  padding 在 fixed 模式下“消失”的真实原因

  不是 padding 失效了，而是它被内容溢出或盒模型压缩“盖住”了。fixed 模式强制按列轨道分配空间，一旦内容（如无空格长 URL 或连续数字）不换行，就会横向撑开、覆盖 padding 区域。

  

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

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

  下载

  典型表现：设置了 padding: 16px，但右侧文字直接顶到单元格右边缘，左侧也看不见留白。

  • 必须配合 word-break: break-all 或 overflow-wrap: break-word 控制换行
  • 避免 white-space: nowrap，它会彻底禁用换行，让 padding 彻底失效
  • word-break: break-word 已废弃，推荐用 overflow-wrap: break-word（Safari 需加 -webkit- 前缀）

  为什么 width 才是唯一可靠的列宽来源

  <col> 是唯一能在布局计算前就锁定列轨道的方式。它不依赖内容、不受 min-width 干扰，也不被层叠样式覆盖。而你在第一行 <td> 上写的 <code>width: 120px，只是“兜底”，且极易被破坏。

  常见错误：<td style="width: 80px"> 写在第二行，完全无效；或者第一行某列是空 <code><td></td>，导致该列基准宽度算成 0，整列塌缩。

  • 优先用 <col width="120">，单位用 px 最稳；百分比仅在 <table> 有明确 <code>width（如 width: 100%）时才可靠
  • 永远不要省略 <col> ——哪怕只写 <col>（等价于 width: auto，表示均分剩余空间）
  • Firefox 对空单元格更敏感，首行某列为空又没 <col>，该列可能直接不可见

  table-layout: fixed 必须和 width 同时设置才生效

  只写 table-layout: fixed 不起作用。浏览器没有参照系，会退回到 auto 模式的行为：按内容最小宽度撑开，看起来和没设一样。

  错误写法：table { table-layout: fixed; } —— 缺少宽度基准，fixed 就是摆设。

  • 必须给 <table> 显式设 <code>width，例如 width: 100% 或 width: 800px
  • table-layout: fixed 不继承，必须直接作用于 <table> 元素，不能靠父容器样式传递 <li>如果用了 <code>border-collapse: collapse，注意它不影响列宽计算，但会合并边框，视觉上可能让 padding 更难察觉
  复杂点在于：fixed 布局把列宽完全交给 CSS 控制，内容再也无法“弹性适应”。一旦后端返回超长字段，前端样式层已无回旋余地——要么提前截断，要么靠 JS 动态 fallback。