table-layout: fixed 是硬性前提，因它强制按首行或<col>定义列宽，避免内容撑开；必须直接设于<table>且配合显式width，<col>比<th>更可靠，还需手动处理溢出。
必须用 table-layout: fixed，否则任何 width 设置都可能被内容无视。
为什么 table-layout: fixed 是硬性前提
浏览器默认用 table-layout: auto，它会扫描所有单元格内容（包括长 URL、无空格字符串）再决定列宽。哪怕你给 <td> 写了 width: 100px，只要里面塞进一串 200 字符的 Base64，整列照样被撑开。
table-layout: fixed 改变的是渲染逻辑：它只看第一行 <th>/<td> 或 <col> 的宽度，后续所有行都严格对齐，内容溢出不会反向影响列宽。
- 该属性不继承，必须直接加在
<table>元素上 - 不设
width（如width: 100%或具体像素值）时，fixed行为不可靠，列宽可能坍缩或错乱 - 仅靠 CSS 类名或父容器宽度无法触发 fixed 布局，必须显式声明
<col> 比第一行 <th> 更可靠
很多人在第一行 <th> 上写 style="width: 120px"，但实际生效常被 min-width、内容内联样式或表格容器约束覆盖。而 <col> 是语义化定义列轨道的唯一方式，渲染前就已确定。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<colgroup><col width="120"><col width="80"></colgroup>，单位用px最稳；百分比在fixed下行为不稳定 - 多个
<col>总宽超过<table>宽度时，浏览器会按比例压缩，但不会溢出容器 - 如果第一行用了
colspan，该单元格的width仍参与列宽计算，但容易导致后续列错位，尽量避免
内容溢出必须手动处理
table-layout: fixed 只管列宽，不管内容怎么放。不加控制，文字会隐藏、溢出或强行撑高行高。
- 单行文本：用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行可换文本：用
word-wrap: break-word;或overflow-wrap: break-word;（后者更现代） - 防长单词撑开：加
word-break: break-all;，但慎用——它会在任意字符处断行，影响可读性 - 图片或
<input>等元素需额外设max-width: 100%; height: auto;，否则仍可能撑破
响应式场景下的常见陷阱
固定列宽在小屏下极易横向溢出，但直接删 table-layout: fixed 会让布局彻底失控。
- 最稳妥做法：把
<table>包在overflow-x: auto;的容器里，保证可滚动 -
<col>不支持媒体查询，想动态调列宽得用 JS 切换width值，或改用display: grid - 隐藏非关键列可用
@media (max-width: 768px) { .hidden-on-mobile { display: none; } }，但记得给对应<col>也加类并同步控制 - 别指望
max-content来“自动适配”列宽——它只是内容宽度估算值，不能替代fixed+ 显式宽度
真正难的不是加那几行 CSS，而是意识到：一旦用了 table-layout: fixed，列宽就完全脱离内容自治，所有宽度决策必须前置、显式、可预测——漏掉 <col>、忘了设 table 宽度、或忽略溢出处理，任一环节出问题，整个表格就“看起来没生效”。
