table-layout: fixed 是唯一能真正锁定列宽的方案，需配合 table 显式宽度、<col> 或首行单元格宽度定义，以及 overflow/white-space 等溢出控制样式才能生效。
table-layout: fixed 是唯一能真正锁定列宽的方案
默认的 table-layout: auto 会让浏览器扫描全部单元格内容后再算列宽，只要某一行出现长 URL、Base64 字符串或连续无空格中文，整列就会被撑开——这不是 bug，是它的设计逻辑。而 table-layout: fixed 强制浏览器只看第一行（或 <col>）的宽度声明来分配列轨道，后续所有行都必须对齐，列宽从此可控。
但光写这一句没用，必须同时满足三个条件：
-
table元素本身要有明确宽度，比如width: 100%或width: 600px；否则列宽无参照基准 - 列宽定义必须来自
<col>元素或第一行的<th>/<td>，后续行里写的width会被忽略 - 内容溢出控制（如
text-overflow: ellipsis）必须配合white-space: nowrap和overflow: hidden，且这些样式得加在<td>上，不是<tr>或<table>
col 元素比 th/td 的 width 更可靠
很多人给 <th> 写了 width: 120px 却发现列还是变宽了，问题往往出在：内容触发了最小宽度保护，或者 table-layout: fixed 没生效，又或者该 <th> 所在行用了 colspan，导致列宽计算错位。
<col> 是语义上专为定义列轨道设计的，它在渲染前就确定了宽度，不受内容、min-width 或父容器约束干扰。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<col width="120">或<col style="width: 120px">，单位优先选px；百分比在fixed模式下行为不稳定 - 避免多个
<col>总宽超过table宽度，否则浏览器会按比例压缩，但不会溢出 - 如果表格有
colspan行，别让第一行参与列宽定义——改用隐藏的首行或直接靠<col>控制
text-overflow: ellipsis 在 td 上不生效的真正原因
直接给 <td> 加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 没反应，不是语法错，而是缺了前置约束：表格没进 fixed 模式，或者 table 没设宽度，导致 <td> 实际没有“固定宽度”这个前提。
要让它生效，必须链式设置：
table { table-layout: fixed; width: 100%; }-
col { width: 150px; }（或第一行<th>的width） td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
注意：text-overflow: ellipsis 只对单行有效；遇到长文本需换行时，换成 word-break: break-all 或 overflow-wrap: break-word，并确保 td 有 max-width 或显式宽度。
响应式下百分比列宽为什么失效
写 th:nth-child(1) { width: 30%; } 却发现小屏上列宽乱跳，常见原因是：父容器本身没设宽度，或者 table 被包在 display: inline-table 里，又或者媒体查询没覆盖到 <col>（它不支持媒体查询）。
更稳的做法是：
- 用
<col>定义基础列宽，再用媒体查询切换整个table的width或显示方式 - 小屏时把非关键列设为
display: none，而不是强行压缩 - 外层套个
<div class="table-wrapper" style="overflow-x: auto">，避免横向滚动条被截断 - 避免在
td上混用min-width和百分比，它们会冲突
最易被忽略的一点：哪怕所有 CSS 都写对了，只要 HTML 里 <thead> 和 <tbody> 的列数不一致（比如某行漏了 <th>），table-layout: fixed 就会退化回 auto 模式——检查 DOM 结构比调样式更优先。
