table-layout: fixed 单独使用无效，必须配合表格显式宽度、<col>或首行单元格width声明，以及文本溢出控制（如word-break或overflow-wrap）才能真正实现列宽固定。

table-layout: fixed 单独写在 CSS 里基本没用，它只是切换布局模式，不设宽度基准就无法分配列宽——你看到的“没生效”，90% 是因为缺了三样东西：table 的 width、<col> 或第一行单元格的 width、以及对文本溢出的显式控制。

为什么 table-layout: fixed 加了却还是自适应？

浏览器只认“预设宽度来源”，不是写了 fixed 就自动固定。它按三级优先级找列宽依据：<col> > 第一行 <th>/<code><td> 的 <code>width（HTML 属性或内联 style）> 均分。如果全没提供，它就退回到“均分 100%”，而均分结果受内容影响极大，尤其小屏下容易崩。

常见错误现象：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• table 没设 width，比如只写了 table { table-layout: fixed; }
• 用了 <col width="200">，但放在 <thead> 里面（必须在 <code><thead> 前，且直接子元素） <li>给第二行 <code><td width="150">，但 fixed 模式下只读第一行，这行被忽略 <h3>怎么用 <code><col> 真正控住每一列？

  <col> 是唯一语义正确、优先级最高、且不依赖渲染顺序的列宽定义方式。它不写在 <tbody> 或 <code><thead> 内，而是紧贴 <code><table> 开始标签后。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>实操建议：</p> <ul><li><code><table> 必须有明确 <code>width，如 width: 100% 或 width: 800px

• <col> 放在 <thead> 之前，例如：<code><table style="width:100%;table-layout:fixed"><col width="120"><col><col width="80"><thead>...
• 没设 width 的 <col> 会均分剩余空间（不是按内容），所以三列写成 <col width="120"><col width="1fr"> 是无效的——fr 单位不被支持
• IE8–11 只认 HTML width 属性（如 <col width="150">），不认 CSS width，跨浏览器稳妥写法是：同时写 <col width="150"> 和第一行 <th width="150">

td 里文字撑破列宽怎么办？

table-layout: fixed 不处理换行和截断，它只管“把这一列切多宽”，后续文本行为完全由你控制。加了 word-break 或 overflow-wrap 才算真正闭环。

关键点：

• 属性必须加在 <td> 或 <code><th> 上，加在 <code><tr> 或 <code><table> 上无效 <li> <code>word-break: break-all：适合 ID、哈希、纯数字字段，在任意字符间断（包括中文汉字之间）
• overflow-wrap: break-word：保留英文单词完整性，中英文混合更自然；旧版 Firefox/Safari 建议同时写两个
• 要让 text-overflow: ellipsis 生效，该单元格必须有明确宽度（来自 <col> 或 width）、display: table-cell（默认）、且父级没设 white-space: nowrap

移动端和 Flex 容器里特别容易翻车

当 <table> 套在 <code>display: flex 或 display: grid 容器里时，flex item 默认 min-width: auto 会阻止表格压缩，导致 fixed 失效，哪怕你写了 width: 100% 也撑满父容器。

解决办法很具体：

• 给 <table> 加 <code>min-width: 0，强制允许压缩
• 小屏建议外层包一层 overflow-x: auto，并加视觉提示（如底部阴影）
• iOS Safari 某些版本对 table-layout: fixed + 百分比列宽支持不稳定，fallback 方案是改用固定像素列宽（如 <col width="160">）
• 避免在 <td> 上用 <code>white-space: nowrap，除非你确定不需要换行——它会让长文本直接溢出，看起来像“固定失败”

  真正卡住人的从来不是 table-layout: fixed 这个声明本身，而是它背后那一套“宽度必须提前声明”的硬约束。漏掉 <col>、忘了 width、或者没配文本断行，都会让效果看起来像没生效。最稳的起步组合就三样：table 的 width、<col> 的 width、<td> 的 <code>word-break 或 overflow-wrap。