table-layout: fixed 能锁住表格宽度是因为它将列宽决定权从内容转交给显式声明的 width 值或 col 元素，需配合 table 宽度、col 或首行 td 的 width 才生效，否则退为等分；内容溢出时需用 word-break 或 white-space 控制换行或省略，Safari 中需注意父容器 display 干扰。
table-layout: fixed 为什么能锁住表格宽度
默认情况下，table 使用 table-layout: auto，浏览器会遍历所有单元格内容算出最宽列，再分配剩余空间——内容一变，列宽就飘。设成 table-layout: fixed 后，浏览器只看第一行（或 col 元素）的宽度声明，后续行内容再长也不影响列宽计算逻辑。
关键点在于：它把“列宽决定权”从内容手里收了回来，交给了你写的 width 值或 col 设置。
必须配合 width 和 col 才生效
只写 table-layout: fixed 没用，浏览器没收到任何列宽指令，会退回到“尽量等分”的模糊行为。
-
table元素本身要设明确的width（比如width: 100%或width: 600px） - 要么在第一行
tr > td上写width，要么用col标签在thead前声明（更可靠） - 如果用
col，记得每个col都得有width，漏一个，那一列就会回退到 auto 计算
示例：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%;">
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 50%;">
<tbody>
<tr><td>超长文本会截断或换行，但不撑开列</td></tr>
</tbody>
</table>
内容溢出时的常见表现和应对
启用 table-layout: fixed 后，内容超宽不会拉伸列，但会直接溢出——可能文字跑出单元格、换行错乱、甚至遮挡隔壁列。
- 加
word-break: break-all或overflow-wrap: break-word让长单词/URL 换行 - 配
white-space: normal（默认是normal，但有些重置样式会改成nowrap） - 如果想强制单行+省略号，得额外加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 注意：
break-all对中文效果生硬（字字可断），break-word更友好
IE8+ 都支持，但 Safari 有个隐藏坑
table-layout: fixed 在 IE8+、Chrome、Firefox、Edge 都没问题，Safari 也没问题——但如果你在 table 外层套了 display: inline-block 或用了某些 flex 容器，Safari 可能忽略 table-layout 设置。
- 检查父容器是否用了
display: inline-block，换成block或去掉 - 避免把
table放进display: flex的子项里，flex 会干扰 table 的渲染流程 - 真遇到 Safari 不生效，加一句
min-width: 0到table上，有时能破局
固定布局看着简单，但宽度来源、内容截断、父容器干扰这三块，漏掉哪一块都可能让表格突然“复活”变宽。
