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 时，浏览器无法建立列索引与宽度声明的一一映射关系，后续所有行的列宽都会错位、挤压或溢出——这不是“慢”，而是布局错误。

  实操建议：

  

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

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

  下载
  • 把带 colspan 的表头抽成独立 <thead>，主数据行从第二行开始，且第二行必须是完整列数的 <code><tr> <li>动态生成表格前，JS 先校验首行是否含 <code>colspan，有则重写结构
  • 绝对不要在第一行混用 colspan 和普通单元格

  移动端对齐多个表格时最容易漏掉的点

  两个都写了 table-layout: fixed 的表格，列宽却对不齐，大概率是以下之一：

  • 一个用了 <col width="25%">，另一个靠第一行 <th width="200">，列宽来源不一致 <li>一个设了 <code>border-collapse: collapse，另一个没设，边框占位差异导致视觉偏移
  • 父容器宽度不一致（比如一个父 <div> 是 <code>width: 100%，另一个是 max-width: 100vw）
  • 字体或字号不同——哪怕只差 1px，在 fixed 模式下也会影响内容换行位置，间接影响高度和滚动体验
  固定列宽这件事，本质是用“确定性”换“灵活”。一旦你接受内容可能换行、截断或撑高，table-layout: fixed 就能立刻兑现性能收益；但如果你还指望它自动适配任意长度文本又保持完美对齐，那得先处理好 word-break、overflow-wrap 和列宽声明的一致性。