为什么CSS表格宽度会超出父容器

table 默认 layout 为 auto，列宽由第一行内容动态决定；overflow-x: auto 对 table 无效，需包裹在有宽度限制的 div 中；启用 table-layout: fixed 并配合 colgroup 或 th 的 width 及 table width: 100% 才能锁定列宽；img、textarea 等需额外约束防止撑破单元格。

table 默认 layout 是 auto，内容决定列宽

浏览器默认用 table-layout: auto 渲染表格，意味着列宽由第一行内容（或 col、colgroup）动态计算得出。哪怕你写了 width: 100% 或给 td 设了 width: 200px，只要某单元格里塞进一长串无空格文本（比如 URL）、大图或未约束的 input，整列就会被撑开——父容器根本拦不住。

overflow-x: auto 加在 table 上无效

table 元素本身不响应 overflow 属性（除非强行改成 display: block，但会破坏语义和样式）。常见错误是直接给 table 写 overflow-x: auto，结果滚动条根本不出现。真正有效的是：把 table 包进一个有明确宽度限制的 div，再对这个 div 设置 overflow-x: auto。

table-layout: fixed 才能锁定列宽

必须显式设 table-layout: fixed，否则列宽永远受内容支配。设完之后，列宽由第一行（或 colgroup）决定，后续所有行都按此缩放。关键点：

1. colgroup 比 th 的 width 更可靠，尤其跨浏览器时
2. 第一行 th 的 width 必须存在且生效，否则 fallback 到 auto
3. table 自身要配 width: 100%，否则 fixed 不起作用

img、textarea、inline-block 子项仍会撑破单元格

table-layout: fixed 只管列宽，不管单元格内部内容会不会溢出。常见漏点：

1. img 没加 max-width: 100% 和 height: auto，原始尺寸照常突破
2. textarea 或 input 在 td 里没设 box-sizing: border-box + min-width: 0，padding/border+默认 min-width: auto 一起发力
3. white-space: nowrap 的文本，得额外配 overflow: hidden + text-overflow: ellipsis 或 word-break: break-word

最常被忽略的是：你以为表格“看起来”没溢出，但某个 td 里的 img 或伪元素悄悄加了 2px 边框+16px padding，而你只重置了 table 却没管它——这种溢出不会触发滚动条，但会让布局在小屏上突然错位。