table-layout: fixed是固定列宽的必要前提，必须配合table显式宽度（如width: 100%）、或首行th/td宽度定义，以及white-space: nowrap、overflow: hidden、text-overflow: ellipsis三件套才能真正生效。
table-layout: fixed 是必须加的，否则列宽永远不稳
移动端表格列宽被压缩，根本原因不是 CSS 写少了，而是浏览器还在用 table-layout: auto（默认值）——它会扫描所有单元格内容，挑出最宽的那条文本，强行把整列拉宽，结果在小屏上就“撑爆”或“挤成一条缝”。table-layout: fixed 才是破局关键：它让浏览器只看第一行 <th> 或 <code><col> 的宽度定义，跳过内容扫描，布局立刻可控。
实操要点：
- 必须给
<table> 同时设 <code>table-layout: fixed和显式width（比如width: 100%），否则百分比列宽无效 - 优先用
<colgroup><col width="20%"></colgroup>定义列宽，比在<th> 上写 <code>width更稳定（<col>不受内容干扰） - 避免混用
min-width和百分比宽度，两者冲突会导致列宽错乱 - 给表格外层容器（即 flex 子项）加
min-width: 0 - 或者直接给
<table> 加 <code>min-width: 0（兼容性更好） - 确认没误开
flex-wrap: wrap，否则看起来像压缩，其实是换行
white-space: nowrap 缺失，横向滚动就失效
很多人加了 overflow-x: auto 却发现表格还是不滚动，真正卡点是单元格默认允许换行：white-space: normal 让长文本自动折行，把高度顶高、宽度压窄，滚动逻辑直接失效。
正确做法是统一给 <th> 和 <code><td> 加：
<pre class="brush:php;toolbar:false;">white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;</pre>
<p>注意：<code>overflow-x: auto 必须加在外层容器（如 <div class="table-container">）上，不是加在 <code><table> 上；否则滚动条出不来。
<h3>flex 容器里放表格，列宽会被二次压缩</h3>
<p>如果表格嵌在 <code>display: flex 的父容器里（比如页眉下拉菜单、卡片布局），即使加了 table-layout: fixed，列宽仍可能被压扁。这是因为 flex item 默认有 min-width: auto，会阻止子元素收缩到内容以下。
解法很简单：
固定列宽但内容又不能溢出，得配三件套
设了 width: 80px 还是看到文字撑破单元格？说明只控宽没控内容行为。真正起效的是这组组合：
width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
漏掉任意一项都可能失败：white-space: nowrap 防换行导致高度失控，overflow: hidden 切掉超出部分，text-overflow: ellipsis 才能显示省略号。如果是多行文本，改用 word-break: break-word 或 line-clamp（需配合 display: -webkit-box）。
最后提醒一句：table-layout: fixed 虽稳，但会让长文本直接截断——如果业务要求内容必须完整可见，横向滚动 + overflow-x: auto 是更安全的选择，别硬扛列宽固定。
