根本原因是浏览器默认 table-layout: auto 导致列宽随内容膨胀，必须设 table-layout: fixed 并配合 width 声明，同时解决 td 文本不换行、图片无约束及父容器未限宽问题。
表格内容超出容器宽度，根本原因不是“内容太长”，而是浏览器默认的 table-layout: auto 让列宽随内容自由膨胀，且 td 内文本不换行、图片不约束、父容器没设限——这三者叠加，必然溢出。
必须加 table-layout: fixed，否则其他都白搭
这是最常被跳过的一步。默认 table-layout: auto 会让浏览器反复测量所有单元格内容再分配列宽，既慢又不可控；而 table-layout: fixed 会让表格只看第一行（或 <col>）的宽度声明，之后所有行都强制对齐，性能好、行为可预测。
- 必须配合
width: 100%或具体像素值使用，否则fixed不生效 - 如果没写
<col>或没给th/td设宽度，fixed会把宽度均分，可能不符合预期 - IE8+ 支持，现代浏览器无兼容问题；但注意：它会让长文本在未显式设置换行时直接撑破列宽
td 里文字不换行？先关掉 white-space: nowrap
很多模板默认给 td 加了 white-space: nowrap（尤其带排序/操作按钮的表格），这会导致单个长单词或 URL 完全不折行，直接把列拉宽。
- 改成
white-space: normal，让文本自然换行 - 对真正不能换行的字段（如 ID、哈希值），单独加
white-space: nowrap并配overflow: hidden+text-overflow: ellipsis - 避免用
word-break: break-all全局启用——它会在任意位置断词，中文体验差；优先用word-wrap: break-word（现标准名overflow-wrap: break-word）
图片和嵌入内容必须加约束
一张未限制尺寸的 img 或 iframe，会直接无视表格列宽，撑开整列。
- 统一加
table td img { max-width: 100%; height: auto; } - 如果
td里还有其他块级元素（如div、pre），也需设max-width: 100%和overflow-x: auto（后者对代码块尤其重要） - 慎用
width: 100%直接套在img上——它会拉伸变形；max-width才是安全选择
容器本身得“守规矩”
就算表格内部全调好了，父容器若没设 max-width 或用了 display: inline-block 等脱离文档流的方式，依然会溢出。
- 给表格的直接父元素加
overflow-x: auto—— 这是最兜底的方案，小屏下出现横向滚动条总比内容错位强 - 避免用
padding百分比控制表格外边距，因为它是按父容器宽度算的，窄屏下 padding 突然变小，容易让表格贴边溢出 - 如果父容器是 flex 或 grid 项，确认没漏设
min-width: 0—— 否则表格可能拒绝收缩
真正卡住的点往往不在“怎么设宽度”，而在忽略 table-layout: fixed 的前提条件、放任 td 里图片野蛮生长、或以为加了 width: 100% 就万事大吉——其实那只是开始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
