table-layout: fixed 是唯一能真正锁定列宽的方案，需配合或首行单元格设置宽度生效，内容溢出需手动处理换行或省略，且该属性不继承、必须直接作用于元素。
table-layout: fixed 是唯一能真正锁定列宽的方案
浏览器默认用 table-layout: auto，它会根据内容自动撑开列宽，哪怕你给 <td> 设了 <code>width: 100px，只要里面塞进一个长单词或超长 URL，整列照样被撑开。只有把 table-layout 显式设为 fixed，宽度才真正由表头（<col> 或第一行 <th>/</th>
<td>）决定。
<h3>必须配合 <code><col> 或首行单元格设置宽度才生效
table-layout: fixed 本身不指定任何宽度，它只是“启用固定布局模式”。实际列宽得靠以下任一方式提供：
- 在
<table> 内顶部放 <code><colgroup> <col width="120"> <col width="80"> </colgroup> - 或让第一行的
<th> 或 <code><td> 带明确宽度（如 <code>style="width: 120px"），后续行同列单元格将严格遵循该宽度 - 仅对后续行的
<td> 设置 <code>width不起作用——它会被忽略内容溢出时默认不换行，需手动处理
开启
table-layout: fixed后，如果单元格内容超长，文字不会自动折行，而是横向溢出甚至破坏布局。常见应对方式：- 加
word-break: break-all强制断词（适合纯英文/数字场景） - 加
white-space: normal恢复正常换行（但需确保容器有明确宽度） - 加
overflow: hidden; text-overflow: ellipsis配合white-space: nowrap显示省略号（需块级显示，如display: block）
注意：
text-overflow: ellipsis在<td> 上生效的前提是：父 <code><table> 有定宽、<code><td> 本身设了 <code>max-width且display为block或inline-block。立即学习“前端免费学习笔记（深入）”；
IE8+ 和所有现代浏览器都支持，但要注意继承行为
table-layout: fixed是 CSS2.1 标准属性，兼容性极好。容易被忽略的一点是：它**不继承**，必须直接作用于<table> 元素本身。写在父容器上无效，写成 <code>table { table-layout: fixed }也不行——必须是table { table-layout: fixed }这种精确选择器，且不能被更具体的选择器覆盖（比如.my-table tbody tr td里试图重置宽度，不会推翻 fixed 布局逻辑）。复杂点在于：一旦用了
fixed，所有列宽就脱离了内容影响，这时候如果某列数据量突增（比如后端返回超长字符串），前端无法靠 CSS 自动适应，必须提前约定字段最大长度或服务端截断——样式层已经失去弹性了。 - 加
