必须开启 table-layout: fixed，否则浏览器需逐行扫描所有单元格内容确定列宽，60行×12列表格仅此一项就可能卡主线程100ms+；auto模式需遍历全部内容测量后才渲染，遇长文本、未约束图片等易反复回流，fixed模式则仅依据第一行或定义秒定列宽，大幅提升首帧渲染速度。
必须开 table-layout: fixed，否则浏览器会逐行扫描所有单元格内容才能确定列宽——60 行 × 12 列的表格，光这一项就可能卡主线程 100ms+。
为什么 auto 模式会让表格变慢
默认 table-layout: auto 要等全部 <td> 内容加载、解析、测量完，才知道哪一列最宽；遇到长文本、未设 <code>white-space 的内联元素、没约束宽高的图片时，还得反复回流重排。尤其在 SPA 动态渲染或后端流式返回数据的场景下，用户看到的是“白屏卡顿”，不是“慢一点”。
而 table-layout: fixed 让浏览器只看第一行（或 <col>）就决定列宽，后续所有行直接按轨道分配空间，首帧渲染快得多。
怎么写才真正生效
光写 table-layout: fixed 不够，必须配齐三要素：
-
table元素显式声明width（比如width: 100%或width: 800px），否则多数浏览器会退回到 auto 行为 - 用
<col width="120">定义列宽——比在<th> 上写 <code>width: 120px更可靠，因为<col>在布局前就锁定列轨道，不受内容min-width或父容器max-width干扰 - 避免第一行出现
colspan，它会干扰列宽计算基准，导致后续列错位 - 单行截断：必须同时设
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+ 明确的width或max-width（<col>已提供宽度，所以前三个就够了） - 慎用
word-break: break-all，中文里会在字中间硬断，体验差；word-wrap: break-word（或现代写法overflow-wrap: break-word）更合理，但要接受行高不一致 - 如果列内容天然需要多行（如备注字段），别强求等高，用
vertical-align: top对齐上边缘，比居中更稳
文字溢出怎么不破坏等宽效果
列宽固定了，但内容撑高、换行、省略号失效，照样让表格“看起来崩了”。关键不是列宽，是单元格内部行为：
移动端和 IE 的坑要提前踩
响应式场景下，<col width="120"> 的 px 值在小屏上会溢出，但 <col> 不支持媒体查询——你没法用 CSS 直接切；IE8–11 更麻烦：table-layout: fixed 下，若所有 <col> 总宽小于 table 宽度，IE 会把剩余空间平均分给每列，而不是留白或拉伸最后一列。
真实项目里，要么用 JS 动态改 <col> 的 width 值（监听 resize），要么干脆换方案：小屏用 overflow-x: auto 包裹表格，或者用 display: grid 重写结构——table-layout 是性能开关，不是万能胶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
