table-layout: fixed 能解决移动端列宽失控，根本原因是它摒弃了 auto 模式下依赖全部内容动态计算列宽的不可控机制，改为仅依据第一行 或 的宽度声明（配合 width: 100%）预先确定列宽，使渲染更快、行为可预测；必须同时设置 width: 100% 提供计算基准，优先用 定义百分比宽度，并配合 word-break: break-word 等处理溢出。
table-layout: fixed 为什么能解决列宽失控
移动端表格列宽“忽宽忽窄”“文字撑破列”“小屏横向滚动”，根本原因是浏览器默认用 table-layout: auto——它等所有内容加载完才计算每列最宽内容，再分配宽度。一旦某单元格有长 URL、连续英文或未换行中文，整列就被拉宽，其他列被压缩，响应式彻底失效。
table-layout: fixed 把这个过程提前：只看第一行 <th> 或 <code><col> 的 width 值（或表格总宽），立刻分配列宽，后续内容再长也不影响布局。渲染快、行为可预测，是移动端可控列宽的起点。
必须同时设置 width: 100% 和 table-layout: fixed
只写 table-layout: fixed 不起作用——浏览器没参照物，会退回到内容驱动的最小宽度。必须加 width: 100%，让表格先占满父容器，百分比列宽才有计算基础。
常见错误写法：
table { table-layout: fixed; } /* ❌ 没 width，列宽仍塌缩 */
正确写法：
table { width: 100%; table-layout: fixed; }
还要注意：table 的父容器（比如 <div>）本身得有明确宽度，例如 <code>width: 100% 或 max-width: 100vw，否则百分比列宽无从算起。
列宽该设在 上优先用 <colgroup></colgroup> + <col>，更干净、语义清晰、兼容性稳：
-
<col> 的 width 属性在 table-layout: fixed 下被严格遵循，且不影响 DOM 结构
- 直接给
<th> 写 <code>style="width: 30%" 也行，但必须写在第一行，且不能混用 px 和 %（比如一列 120px，一列 30%，某些 Android WebView 会回退到 auto） - 避免对
<td> 单独设 <code>width，它在 fixed 模式下常被忽略示例：
<colgroup>
<col width="25%">
<col width="45%">
<col width="30%">
</colgroup>
内容溢出和换行怎么处理
table-layout: fixed 下，长文本不自动换行，会直接撑破列或溢出。必须显式控制：
- 允许软换行：
word-break: break-word 或 overflow-wrap: break-word（推荐前者，兼容性更好）
- 强制单行+省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
- 图片必须加
max-width: 100%; height: auto，否则无视列宽
- 如果用了
border-collapse: collapse，边框会额外占空间，总宽可能超 100%，建议加 box-sizing: border-box 并微调 padding
这些样式要加在 th, td 上，不是 table。
真正难的不是加这三行 CSS，而是意识到：移动端表格不是“缩放问题”，而是“结构问题”。当屏幕窄到连三列都挤不下时，table-layout 再稳也没用——这时候该考虑用媒体查询把 <tr> 改成 <code>display: block，让每行变卡片。那已经是另一层取舍了。
优先用 <colgroup></colgroup> + <col>，更干净、语义清晰、兼容性稳：
-
<col>的width属性在table-layout: fixed下被严格遵循，且不影响 DOM 结构 - 直接给
<th> 写 <code>style="width: 30%"也行，但必须写在第一行，且不能混用 px 和 %（比如一列120px，一列30%，某些 Android WebView 会回退到auto） - 避免对
<td> 单独设 <code>width，它在fixed模式下常被忽略示例：
<colgroup> <col width="25%"> <col width="45%"> <col width="30%"> </colgroup>
内容溢出和换行怎么处理
table-layout: fixed下，长文本不自动换行，会直接撑破列或溢出。必须显式控制：- 允许软换行：
word-break: break-word或overflow-wrap: break-word（推荐前者，兼容性更好） - 强制单行+省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 图片必须加
max-width: 100%; height: auto，否则无视列宽 - 如果用了
border-collapse: collapse，边框会额外占空间，总宽可能超 100%，建议加box-sizing: border-box并微调padding
这些样式要加在
th, td上，不是table。真正难的不是加这三行 CSS，而是意识到：移动端表格不是“缩放问题”，而是“结构问题”。当屏幕窄到连三列都挤不下时，
table-layout再稳也没用——这时候该考虑用媒体查询把<tr> 改成 <code>display: block，让每行变卡片。那已经是另一层取舍了。 - 允许软换行：
