table-layout: fixed是唯一真正固定列宽的CSS方式，但必须同时满足三个条件：table设明确width、为table直接子元素且数量与列数一致、每个带style="width"值，缺一即退化为auto行为。

table-layout: fixed 是唯一能真正固定列宽的 CSS 方式，但单独写它几乎一定无效——缺了三个硬性条件，表格就会退回到内容撑开的 auto 行为。

为什么 table-layout: fixed 加了却没反应

浏览器只把 table-layout: fixed 当作“切换计算模式”的开关，不提供宽度依据，它就无从分配列宽。常见失效原因：

• table 没设明确 width（如 width: 100% 或 width: 800px），百分比 就失去参照
• 写在 里，或塞进了 ——它必须是 的直接子元素，且在 （如有）之后、 之前
  用了废弃写法
  ，现代浏览器静默忽略；必须改用
  所有
  都没写 width，浏览器 fallback 到“均分 100%”，结果仍随内容波动

  怎么用

  真正控住每一列
  是优先级最高、语义最清晰的列宽定义方式，但结构和写法错一点就全白搭：
  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  必须紧贴 开始后、 前；每个 对应一列，数量必须和实际列数一致
  合法， 也合法，但前提是 table 有明确 width
  可用于最后一列自适应剩余空间，但仅限一列；多列写 auto 会导致 fixed 模式退化
  span="3" 不会让三列都变宽，只表示该
  覆盖三列逻辑位置，样式只作用于起始列

  内容溢出时，white-space 和 overflow 必须配对

  table-layout: fixed 锁定了列宽，但长文本、URL、连续无空格英文仍会撑破或溢出单元格，单靠 width 无法约束视觉表现：

  • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（
  放错了位置——这三个点卡住，再细的样式也出不来效果。
  默认是 table-cell，可直接用）

  自动换行：word-break: break-word; 或 overflow-wrap: break-word;，同时确保 white-space: normal;

  图片破坏列宽：img { max-width: 100%; height: auto; }，否则会无视列宽基准

  边框影响总宽：加 box-sizing: border-box; 让 width: 100% 包含边框和 padding

  最易被忽略的不是怎么写 width，而是忘了父容器有没有宽度、table-layout 没设、以及

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