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

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

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

浏览器只在 <table> 元素上识别该声明，且它本身不定义尺寸，只是切换布局算法。生效前提有三个，缺一不可： <ul><li><code><table> 必须有明确 <code>width（如 width: 100% 或 width: 600px），否则 fixed 布局失去计算锚点

至少一列需提供宽度依据：<col> 元素（推荐）或第一行 <th>/</th> <td> 的 <code>style="width: ..."（HTML width 属性已废弃，现代浏览器静默忽略）

父容器不能是 display: inline 或未设宽的 flex 容器，否则百分比 width 解析失败

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

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

html-to-pptx-converter

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

下载

• <colgroup></colgroup> 必须是 <table> 的**直接子元素**，紧贴在 <code><table> 开始后、<code><thead> 前；塞进 <code><tbody> 或 <code><tr> 里，DevTools 都看不到它 <li>每个 <code><col> 对应一列，顺序错一位，整列样式就错位；要三列等宽，得写三个 <col style="width: 150px">，不能靠一个 span="3"
• 必须用 style="width: 120px"，<col width="120"> 在 HTML5 中已被废弃，所有现代浏览器静默忽略
• 百分比值（如 style="width: 25%"）只在 <table> 有明确 <code>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> 和 <code><th> 设 <code>vertical-align: top，否则多行文本上下错位

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！