如何利用CSS中的table-layout: fixed 提升长表格渲染速度？

必须开启 table-layout: fixed，否则浏览器需逐行扫描所有单元格内容确定列宽，60行×12列表格仅此一项就可能卡主线程100ms+；auto模式需遍历全部内容测量后才渲染，遇长文本、未约束图片等易反复回流，fixed模式则仅依据第一行或<col>定义秒定列宽，大幅提升首帧渲染速度。

必须开 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 是性能开关，不是万能胶。