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。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

table-layout: fixed 才能锁定列宽

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

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

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

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

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！