table-layout: auto 是浏览器默认行为，但会因逐列扫描内容取最大宽度导致撑破容器、错位和响应失效；fixed 模式通过首行显式宽度实现可控布局，需配合 overflow 和 white-space 截断文本。
table-layout: auto 是浏览器默认行为，但“自动布局”常被误认为能智能适配内容——它其实只是按传统规则计算列宽，容易导致错位、溢出或响应失效。
为什么 table-layout: auto 会撑破容器
浏览器在 auto 模式下逐列扫描所有单元格内容（包括长单词、URL、未换行文本），取最大宽度作为该列基准；一旦某列含超长不可折断内容（如 https://example.com/very-long-path-with-no-dashes），整列就会强行撑开，拖垮整个表格宽度。
- 即使父容器设了
width: 100%或max-width: 600px，auto模式仍优先满足内容宽度，不触发截断 -
white-space: nowrap（默认值）会让文本拒绝换行，加剧溢出 - 移动端视口窄，这种“内容驱动列宽”的逻辑尤其危险
table-layout: fixed 才是可控布局的关键
启用 fixed 后，列宽由第一行 tr 中的 th/td 的 width 属性或 CSS width 决定，后续行内容不再影响列宽分配——这才是真正可预测的布局控制点。
- 必须显式设置第一行单元格的宽度，例如：
<th style="width: 20%">姓名</th>或用 CSS 类统一控制 - 配合
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可安全截断超长文本 - 若第一行没设宽，浏览器退回到
auto行为，fixed形同虚设
常见错误：混用 auto 和 colspan/rowspan
在 auto 模式下使用 colspan 或 rowspan，浏览器无法准确预估跨列单元格应占多少空间，常导致列宽抖动、表头与数据列错位，尤其在动态插入行后更明显。
- 修复方法：改用
fixed+ 显式定义每列基础宽度，再让跨列单元格通过width: 100%自动填满对应区域 - 避免在
thead中用colspan合并表头，除非所有被合并列宽度已明确固定 - 调试时可临时加
border: 1px solid red到th和td，直观查看列宽是否对齐
真正需要“自动适应”的场景（比如后台日志列表），别依赖 table-layout: auto，而是用 JavaScript 监听容器宽度 + 动态调整列宽，或直接换用 display: grid —— 表格语义只留给真实数据表，布局交给现代 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
