table-layout: fixed 可跳过内容测量直接锁定列宽以提升渲染性能，但需同时满足三条件：table有显式width、列宽由col或首行td/th的width属性定义、table为直系父容器且首行无colspan。
table-layout: fixed 跳过内容测量，直接锁定列轨道
浏览器在 table-layout: auto 模式下必须等全部 <td> 内容加载、解析、排版完毕，才能知道哪一列最宽——这涉及字体度量、图片尺寸、换行逻辑、<code>white-space 等完整渲染流程。60 行 × 12 列的表格光这一项就可能阻塞主线程 100ms+。
而 table-layout: fixed 模式下，浏览器只读两件事：<col> 的宽度定义，或第一行 <th>/<code><td> 的 <code>width 属性（注意：不是 style="width: ..."）。它根本不看第二行及之后任何单元格的内容长度、是否含图片、有没有长 URL，直接按“列轨道”分配空间，首帧渲染快得多。
为什么只写 table-layout: fixed 不生效？
三个硬性条件缺一不可，否则浏览器会 fallback 回 auto：
-
table元素必须有显式width（如width: 100%或width: 800px），否则无计算基准，fixed 失效 - 列宽必须由
<col>或第一行单元格的width属性提供；style="width: 120px"在<th> 上纯属无效 <li> <code><col>必须是<table> 的直接子节点，插在 <code><thead> 里会被忽略 <h3>colspan 会让 fixed 布局彻底崩坏</h3> <p>第一行出现 <code>colspan时，浏览器无法建立列索引与宽度声明的一一映射关系，后续所有行的列宽都会错位、挤压或溢出——这不是“慢”，而是布局错误。立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把带
colspan的表头抽成独立<thead>，主数据行从第二行开始，且第二行必须是完整列数的 <code><tr> <li>动态生成表格前，JS 先校验首行是否含 <code>colspan，有则重写结构 - 绝对不要在第一行混用
colspan和普通单元格 - 一个用了
<col width="25%">，另一个靠第一行<th width="200">，列宽来源不一致 <li>一个设了 <code>border-collapse: collapse，另一个没设，边框占位差异导致视觉偏移 - 父容器宽度不一致（比如一个父
<div> 是 <code>width: 100%，另一个是max-width: 100vw） - 字体或字号不同——哪怕只差 1px，在 fixed 模式下也会影响内容换行位置，间接影响高度和滚动体验 固定列宽这件事，本质是用“确定性”换“灵活”。一旦你接受内容可能换行、截断或撑高，
移动端对齐多个表格时最容易漏掉的点
两个都写了
table-layout: fixed的表格，列宽却对不齐，大概率是以下之一：table-layout: fixed就能立刻兑现性能收益；但如果你还指望它自动适配任意长度文本又保持完美对齐，那得先处理好word-break、overflow-wrap和列宽声明的一致性。 - 把带
