table-layout: fixed 是唯一能绕过内容扫描的硬开关，必须配合 table 显式 width、col 或第一行 width 声明及单元格文本溢出控制（如 white-space 和 overflow）三者同时生效。
table-layout: fixed 是唯一能绕过内容扫描的硬开关
不设 table-layout: fixed，浏览器就必须等整张表所有 <td> 内容加载、解析、测量完，才能确定列宽——千行表格卡顿不是 JS 慢，是渲染引擎被拖在 layout 阶段动不了。auto 模式下哪怕一列塞了个 64 位 UUID 或 base64 图片，整列就会被撑开，其他列被暴力压缩，结果不可控。
<p>实操必须满足三点才真正生效：</p>
<ul><li><code><table> 元素必须有明确 <code>width（如 width: 100% 或 width: 800px），否则退化回 auto
<col> 或第一行 <th> 的 <code>width 属性，后续行的 width 全部被忽略
min-width/max-width：fixed 模式下它们常被跳过，导致列宽意外坍缩或溢出用 <col> 定义列宽比 CSS 类更稳
<col> 是唯一不依赖 DOM 渲染顺序、不受 JS 动态插入干扰的列级控制方式。它在 HTML 解析阶段就完成宽度分配，比任何运行时样式都早。
安全写法示例：
| 序号 | 订单号 | 客户 | 状态 |
|---|
这些写法会出问题：
-
<col width="1fr">：CSS Grid 单位，在<col>中无效，直接被忽略 -
width: max-content或width: fit-content：<col>不支持，无 fallback - 混用
<col>和第一行<th style="width: 20%">：优先级冲突，结果不确定 <h3>内容溢出必须靠 <code>white-space+overflow+text-overflow组合控制table-layout: fixed只管列宽，不管单元格里文字怎么换行。长文本（比如 JSON 片段、UUID）默认拒绝折行，直接撑裂布局。按语义配策略：
- 操作列（按钮/图标）：
white-space: nowrap+overflow: hidden，确保按钮不换行、不撑宽 - 主文本字段（如“备注”）：
white-space: normal+word-break: break-word，允许软换行 - 固定长度字段（如“手机号”）：
white-space: nowrap+text-overflow: ellipsis+overflow: hidden
父容器加
overflow-x: auto才管用，加在<table> 上没意义 <p>表格本身是块级元素，不会自动横向滚动。常见错误是给 <code><table> 加 <code>overflow-x: auto——它没用，因为滚动行为由父容器决定。正确做法：
- 外层容器必须有明确
width或max-width（比如max-width: 1200px） - 在这个容器上加
overflow-x: auto，且不能设display: inline-block等破坏块流的行为 - 小屏下
<col width="200">不会自适应缩放，所以百分比列宽（如width="30%"）比像素值更适配流式场景
复杂点在于：列宽策略、内容截断规则、外层滚动容器三者必须对齐，漏掉任意一环，表格在窄屏上就会溢出或错位。
- 操作列（按钮/图标）：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
