必须开启 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 不够，必须配齐三要素：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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