table-layout:fixed 能绕过默认动态计算，因它仅依据第一行或的width声明布局，跳过全表内容测量，提升渲染性能且宽度可控。

table-layout:fixed 为什么能绕过默认的动态计算

浏览器默认用 table-layout:auto，会扫描整张表所有内容（包括换行、长文本、内联元素）来推算列宽，导致重排开销大、渲染慢，且宽度不可控。设成 table-layout:fixed 后，表格只看第一行（或 <col> 标签）的宽度声明，后续所有行都强制按此布局，跳过内容测量。

• 宽度由 <col> 或第一行 <th>/</th> <td> 的 <code>width 决定，内容溢出不撑宽
• 百分比宽度按容器计算，px 值直接生效，auto 表示“剩余空间均分”
• 单元格内文字默认不换行，需手动加 word-break: break-word 或 white-space: normal

<table style="table-layout: fixed; width: 100%;">
  <col style="width: 200px">
  <col style="width: 1fr"> <!-- 注意：fr 在 col 上无效，仅支持 px/%/auto -->
  <tr><td>固定宽</td><td>剩余宽</td></tr>
</table>

单元格 padding/border 如何参与盒模型计算

在 table-layout:fixed 下，padding 和 border 仍计入单元格总宽，但不会影响列基准宽度——列宽是“净内容区”宽度，不是包含盒总宽。也就是说：width: 200px 指的是内容区宽，加上 padding 和 border 后实际占位会超。

• 默认 box-sizing: content-box，改用 box-sizing: border-box 更符合直觉
• border-collapse: collapse 时，相邻边框合并，不影响列宽计算；separate 时，border-spacing 会额外加在列之间，不占用单列宽度
• padding 超出内容区会触发内部滚动或截断，除非配合 overflow: hidden 或 text-overflow: ellipsis

常见错误现象：width: 100px 的列，加了 padding: 10px 后看起来像 120px 宽——其实是内容区 100px + 左右 padding 各 10px = 120px 占位，但列基准仍是 100px。

IE8+ 与现代浏览器在 fixed 布局下的兼容差异

table-layout:fixed 本身从 IE5.5 就支持，但行为细节有坑：


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载

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

• IE8– 不支持 max-width / min-width 在 <col> 上生效，只能靠第一行单元格的样式控制
• Safari 15.4 之前对 vw 单位在 <col> 中解析不稳定，建议统一用 % 或 px
• Firefox 对空单元格的 width 处理更严格，若第一行某列为空且没设 width，该列可能塌缩为 0
• 所有浏览器都不支持在 <col> 上使用 calc()，必须写死或用 JS 动态算好再注入

使用场景：后台数据列表、日志表格、带固定操作列的管理界面——只要列结构稳定、内容长度可预期，table-layout:fixed 就比 auto 快且可控得多。

为什么 overflow:hidden 有时不截断长文本

设了 table-layout:fixed 且单元格 width 明确，但长英文或数字串仍溢出，往往不是 CSS 没生效，而是缺少组合规则：

• white-space: nowrap 是默认值，它会让长串拒绝折行，必须显式改成 white-space: normal 或 break-spaces
• word-break: break-all 强制断词，适合纯英文/数字；word-break: break-word（已废弃，用 overflow-wrap: break-word 替代）更温和
• overflow: hidden 只隐藏溢出部分，不自动加省略号；要 text-overflow: ellipsis，还得满足三条件：块级、white-space: nowrap、overflow: hidden（所以和折行需求互斥）

容易踩的坑：给 <td> 加了 <code>width 和 overflow: hidden，但忘了删掉 white-space: nowrap，结果文本照常溢出——因为 nowrap 下，overflow 仅裁剪，不断行。

事情说清了就结束。真正难的不是设 table-layout:fixed，而是把 col 宽度、box-sizing、white-space 和 overflow 这四者配平，少一个，表格就可能在某个浏览器里突然“变胖”或“错位”。