table-layout: fixed 必须配合 table 显式 width、<col> 或首行单元格 width 依据，以及文本溢出控制才能真正固定列宽；缺一即退化为内容驱动布局。

table-layout: fixed 必须配合 width 才能真正固定表格宽度，光写这个声明几乎没用——浏览器没基准就无法分配空间，你看到的“宽度没锁住”，大概率是缺了显式表宽或列宽依据。

为什么 table-layout: fixed 加了却还是随内容变宽？

浏览器只在 <table> 元素上识别该声明，且它本身不定义尺寸，只是切换布局算法。生效前提有三个，缺一不可：

• <table> 必须有明确 width（如 width: 100% 或 width: 600px），否则 fixed 布局失去计算锚点
• 至少一列需提供宽度依据：<col> 元素（推荐）或第一行 <th>/<td> 的 style="width: ..."（HTML width 属性已废弃，现代浏览器静默忽略）
• 父容器不能是 display: inline 或未设宽的 flex 容器，否则百分比 width 解析失败

怎么用 <col> 精确控制每列宽度？

<col> 是最可靠、语义最清晰的方式，但位置和写法极容易出错：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• <colgroup> 必须是 <table> 的**直接子元素**，紧贴在 <table> 开始后、<thead> 前；塞进 <tbody> 或 <tr> 里，DevTools 都看不到它
• 每个 <col> 对应一列，顺序错一位，整列样式就错位；要三列等宽，得写三个 <col style="width: 150px">，不能靠一个 span="3"
• 必须用 style="width: 120px"，<col width="120"> 在 HTML5 中已被废弃，所有现代浏览器静默忽略
• 百分比值（如 style="width: 25%"）只在 <table> 有明确 width（如 width: 100%）时才可计算，否则视为无效

table-layout: fixed 下文字溢出怎么处理？

固定列宽后，长文本默认不会自动换行或截断，反而会撑破单元格或错位显示：

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

• 需要截断的列（如 ID、操作按钮）：加 overflow: hidden + text-overflow: ellipsis + white-space: nowrap，且该单元格必须有明确宽度来源（来自 <col> 或 th/td 的 width）
• 需要换行的列（如描述、标题）：用 word-break: break-word 或 overflow-wrap: break-word，避免无空格长串（如 UUID、URL）溢出
• 务必给 <td> 和 <th> 设 vertical-align: top，否则多行文本上下错位

最容易被忽略的是：所有控制都依赖「该单元格有明确宽度」这个前提。没有 <col> 或首行 width，text-overflow 和 word-break 都是摆设——它们没宽度可依，自然无法裁剪或换行。