table-layout: fixed 是前提，必须配合 width（如100%）或 <col> 才生效；需重置 white-space: normal 防止长文本撑列；图片等内容须设 max-width: 100%；父容器要加 overflow-x: auto 并检查 min-width: 0。
table-layout: fixed 是前提，不加它其他都白搭
浏览器默认用 table-layout: auto，会反复扫描所有行的内容再算列宽——既慢又不可控，长文本、图片、URL 一来就撑破。必须显式设 table-layout: fixed，表格才按第一行或 <col> 的宽度分配列，行为可预测。
但注意：table-layout: fixed 单独写没用，得配合 width 才生效。可以写 width: 100%（推荐），或给每列用 <col width="200"> 显式声明。
- IE8+ 和所有现代浏览器都支持，无兼容风险
- 如果没设
<col>也没写width，fixed 会把宽度均分，可能不符合预期 - 别指望 fixed 自动帮你换行——它只管列宽分配，换行还得靠后续样式
td 里文字不换行？先查 white-space
很多模板或框架默认给 td 加了 white-space: nowrap，尤其在操作列、ID 列里。这会让一串 UUID 或 URL 死活不折行，直接拉宽整列。
通用解法是重置为 white-space: normal，让文本按空格/标点自然断行。对真不能换行的字段（比如哈希值、状态码），单独处理：
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 但必须包裹一层
<div>并设display: block，否则ellipsis不生效 - 同时要给
td设width或max-width，不然省略号找不到“截断点”
图片和嵌入内容必须加 max-width: 100%
一张没约束的 <img> 或 <iframe>，会无视表格列宽直接撑开，这是溢出最常被忽略的源头。
统一加这条规则即可：
table td img,<br>table td iframe,<br>table td video {<br> max-width: 100%;<br> height: auto;<br>}
别用 width: 100%——它会强制拉伸变形；max-width 才安全。同理，如果 td 里还有 <div>、<pre> 等块级内容，也要设 max-width: 100% 和必要时的 overflow-x: auto。
外层容器不守规矩，表格再规范也白费
就算 table 内部全调好了，父容器若用了 display: inline-block、flex 或没设 max-width，表格仍可能脱离视口。
关键检查点：
- 给表格的直接父元素加
overflow-x: auto——这是小屏下最兜底的方案 - 如果父容器是 flex 项，确认它有
min-width: 0，否则表格拒绝收缩 - 避免用
padding百分比控制外边距，窄屏下 padding 突然变小，容易导致表格贴右边缘溢出 - 别依赖
tbody { height: 300px; overflow-y: auto }——表格上下文不支持，浏览器直接忽略
真正卡住的地方，往往不在那一行 CSS 上，而在它上面三四层的布局逻辑里。逐层 inspect 元素的 computed height 和 max-height 才能定位问题。
