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 就支持，但行为细节有坑：
立即学习“前端免费学习笔记（深入）”；
- 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 这四者配平，少一个，表格就可能在某个浏览器里突然“变胖”或“错位”。
