table-layout: fixed没生效最常见原因是table未设width或父容器无宽；它只改变列宽计算逻辑，不自动约束尺寸，需配合col元素或第一行width声明及显式width设置才能生效。
table-layout: fixed 为什么没生效
最常见原因是父容器没设宽度，或者 table 自身宽度被内容撑开。CSS 的 table-layout: fixed 不会自动约束表格尺寸，它只改变列宽计算逻辑：浏览器不再根据内容反推列宽，而是按第一行（或 col / th / td 的 width）分配空间。
实操建议：
- 给
table显式设置width（如width: 600px或width: 100%） - 确保父元素不出现
display: inline或未设宽的flex容器（会干扰百分比解析） - 避免在
td内用white-space: nowrap+ 长文本，这会让内容溢出却不触发换行，看起来像“没固定住”
怎么让某一列固定像素、其余自适应
用 col 元素配合 table-layout: fixed 是最可靠方式。注意：col 必须放在 thead 前（或直接在 table 下），且不能写在 tbody 里。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%;"> <col width="120"> <col> <col width="80"> <thead><tr><th>ID</th><th>名称</th><th>操作</th></tr></thead> <tbody><tr><td>1</td><td>商品A</td><td>编辑</td></tr></tbody> </table>
关键点：
-
col的width值优先级高于th/td的width - 没设
width的col会均分剩余空间（不是按内容长度） - 如果所有
col都设了像素值，总和超过table宽度，浏览器会按比例缩放（非截断）
fixed 布局下文字溢出怎么处理
默认情况下，table-layout: fixed 会让长文本直接撑破单元格或换行异常。必须手动控制文本行为。
推荐组合：
- 对需要截断的列加：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 对需要换行的列加：
word-break: break-word;或overflow-wrap: break-word; - 务必给
td和th设置vertical-align: top，否则多行文本可能上下错位
注意：text-overflow: ellipsis 在 table 单元格中生效的前提是：该单元格有明确宽度（来自 col 或 width）、display 为 table-cell（默认）、且父级未设 white-space: nowrap。
IE8–11 中 fixed 布局的兼容性坑
IE 对 table-layout: fixed 的实现有严重偏差：它会忽略 col 的 width，转而读取第一行 th/td 的 width 属性（HTML 属性，非 CSS）。现代浏览器两者都认，但 IE 只认 HTML width。
跨浏览器稳定写法：
- 同时写
<col width="150">和<th width="150">（第一行） - 避免用百分比
width（IE8–10 解析不稳定） - 不要依赖
min-width或max-width控制列宽（IE 完全不支持）
真正难搞的不是语法，而是当表格嵌套在 flex 或 grid 容器中时，不同浏览器对 table-layout: fixed 的盒模型解释差异会放大——这种场景建议改用 CSS Grid 模拟表格语义，而非硬扛。
