table-layout: auto 是默认模式，按内容最大自然宽度动态分配列宽，易被长文本撑开导致错位；需配合 word-break、min/max-width 等控制才可控，而 fixed 模式则依赖预设宽度实现稳定布局。
table-layout: auto 是浏览器默认行为，它确实会“根据内容调整列宽”，但这个“自动”不等于“你想要的自动”——它优先保障内容可读性，而非布局可控性。直接设 table-layout: auto 往往不够，必须配合其他 CSS 才能达成稳定、可预期的效果。
为什么 table-layout: auto 下列宽看起来“不听话”
浏览器在 auto 模式下，会逐列扫描所有单元格（包括 <th> 和 <code><td>），取每列中“不可换行内容的最大自然宽度”作为该列基准宽度。这意味着：
<ul>
<li>一列塞了长英文单词或无空格 URL（如 <code>https://example.com/very-long-path-with-no-dashes），整列会被撑开，其他列被压缩
width: 33% 写在 <td> 上基本无效，浏览器只当它是最小参考值，内容宽于该值就直接突破
<li>中文虽然能断行，但若某列全是单字+空格少，实际占宽仍可能远小于预期</li>
<li>边框、padding、font-size 差异会间接影响宽度计算，尤其用了 <code>border-collapse: collapse 后边框不占额外空间，但 padding 仍参与
table-layout: auto 下真正起效的列宽控制手段
想保留内容自适应能力，又不让某列失控，核心是“限制内容对宽度的主导权”，而不是禁用换行或强行 fixed：
- 给
<td> 和 <code><th> 加 <code>word-break: break-word（或break-all），让长串文本主动断行，避免撑列 - 用
min-width+max-width锁定列宽范围，例如min-width: 120px; max-width: 120px实现等宽，或min-width: 80px; max-width: 200px允许弹性伸缩 - 确保
white-space: normal（不要写nowrap，否则word-break失效） - 统一加
table, th, td { box-sizing: border-box; }，防止 padding/border 额外加宽 - 外层容器需有明确宽度（如
div { width: 100%; }），否则百分比单位无参照 <table> 必须带明确 <code>width（如width: 100%或width: 800px）- 列宽必须定义在
<col>元素上（放在<colgroup></colgroup>内，且紧贴<table> 开始后），不能只靠第一行 <code><th> 的 <code>width -
<col>不支持fr单位，只认px、%、em等绝对或相对单位 - 内容超宽时，默认会换行；若要截断+省略号，需额外加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
什么时候该放弃 table-layout: auto 改用 fixed
当表格列数固定、首行结构稳定、且你明确知道每列该占多宽时，table-layout: fixed 才是更可靠的选择。但它不是“自动适应内容”，而是“强制按设定分配”：
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：table-layout: auto 下的“自适应”本质是内容驱动的妥协结果，而 fixed 下的“自适应”其实是开发者主动定义后的约束表现。选哪个，取决于你更信任内容，还是更信任自己写的宽度规则。
