table-layout: fixed 下 width 仅定义内容区宽度，padding 和 border 会额外撑大单元格导致内容压缩；必须配合 <col> 设置列宽、显式指定 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>本身无效（表格单元格不支持该属性） - 可行做法：把
padding和border的尺寸提前算进设计余量，比如用<col width="132">补足 16×2+1×2 - 更稳妥的方案：在
<td>内嵌一层<div>，再对它设box-sizing: border-box和width: 100%
padding 在 fixed 模式下“消失”的真实原因
不是 padding 失效了，而是它被内容溢出或盒模型压缩“盖住”了。fixed 模式强制按列轨道分配空间，一旦内容（如无空格长 URL 或连续数字）不换行，就会横向撑开、覆盖 padding 区域。
典型表现：设置了 padding: 16px，但右侧文字直接顶到单元格右边缘，左侧也看不见留白。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
word-break: break-all或overflow-wrap: break-word控制换行 - 避免
white-space: nowrap，它会彻底禁用换行，让 padding 彻底失效 -
word-break: break-word已废弃，推荐用overflow-wrap: break-word（Safari 需加-webkit-前缀）
为什么
<col> 是唯一能在布局计算前就锁定列轨道的方式。它不依赖内容、不受 min-width 干扰，也不被层叠样式覆盖。而你在第一行 <td> 上写的 width: 120px，只是“兜底”，且极易被破坏。
常见错误：<td style="width: 80px"> 写在第二行，完全无效；或者第一行某列是空 <td></td>，导致该列基准宽度算成 0，整列塌缩。
- 优先用
<col width="120">，单位用px最稳；百分比仅在<table>有明确width（如width: 100%）时才可靠 - 永远不要省略
<col>——哪怕只写<col>（等价于width: auto，表示均分剩余空间） - Firefox 对空单元格更敏感，首行某列为空又没
<col>，该列可能直接不可见
table-layout: fixed 必须和 width 同时设置才生效
只写 table-layout: fixed 不起作用。浏览器没有参照系，会退回到 auto 模式的行为：按内容最小宽度撑开，看起来和没设一样。
错误写法：table { table-layout: fixed; } —— 缺少宽度基准，fixed 就是摆设。
- 必须给
<table>显式设width，例如width: 100%或width: 800px -
table-layout: fixed不继承，必须直接作用于<table>元素，不能靠父容器样式传递 - 如果用了
border-collapse: collapse，注意它不影响列宽计算，但会合并边框，视觉上可能让 padding 更难察觉
