table-layout: fixed 单独使用无效，必须同时设置 table 显式宽度、col 元素或首行单元格 width 声明，并控制文本溢出行为；缺一即退回到 auto 模式，列宽仍受内容影响。
为什么写了 table-layout: fixed 却没固定列宽？
浏览器根本不认“光写 table-layout: fixed”这一套。它只是个开关，不提供宽度依据就自动退回到 auto 模式——你看到的还是内容撑开、列宽飘忽，不是 bug，是设计如此。
常见失效原因：
<table> 没设显式 <code>width（比如漏了width: 100%或width: 800px）-
<col>写在<thead> 里面，或塞进了 <code><tbody> ——它必须是 <code><table> 的<strong>直接子元素</strong>，且得在 <code><caption></caption>（如有）之后、<thead> 之前<li>用了已废弃的 <code><col width="120">，现代浏览器静默忽略；必须改用<col style="width: 120px"> - 所有
<col>都没写width，结果浏览器均分 100%，而均分值仍被内容最小宽度拖着走 -
<colgroup></colgroup>必须为<table> 的直接子元素，结构顺序必须是：<code><table> <colgroup> <col> <col> </colgroup> <thead>...</thead>...</table> - 每个
<col>对应一列，数量必须和实际列数严格一致；列数动态时，JS 必须在首次渲染前插入对应数量的<col> - 单位只支持
px、%、em等，fr和minmax()不可用 -
<col style="width: auto">在 fixed 下不参与计算，仅作语义占位；最多只能有一列这么写，多列会导致退化 - 强制单词内断行（适合 ID、哈希、URL）：
word-break: break-all - 允许自然换行（需容器有明确宽度）：
white-space: normal; overflow-wrap: break-word - 截断加省略号（需组合三属性）：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 所有这些都得加在
<td> 或 <code><th> 上，写在 <code><tr> 或 <code><table> 上无效<li>别忘了统一设 <code>box-sizing: border-box，否则边框和 padding 会偷偷吃掉列宽 - 父容器是
display: inline或未设宽的flex容器，导致百分比width无法解析 - 外层没设
overflow-x: auto，小屏下表格横向溢出被裁剪，误以为列宽没固定 - 使用了
border-collapse: separate但没调border-spacing，间隙叠加导致整体超宽 - SSR 渲染后用 JS 动态插入
<col>—— 此时样式早已计算完毕，无效
在 Chrome DevTools 的 Computed 面板里搜 table-layout，确认值真是 fixed——搜不到，等于没开。
怎么用 <col> 真正控住每一列？
<col> 是唯一语义正确、优先级最高、且不依赖内容渲染顺序的列宽定义方式。它在 DOM 构建阶段就参与布局计算，不受 JS 插入、样式覆盖或内容干扰。
实操要点：
<td> 里文字撑破列宽怎么办？
<p><code>table-layout: fixed 只管“列切多宽”，不管内容是否溢出、换行、撑高。单元格高度乱跳、边框错位、横向滚动条意外出现，90% 是这里没控制好。
必须手动加 CSS 控制文本行为：
容易被忽略的外层约束条件
即使 <col> 写对、table-layout 开启、文本也控住了，表格仍可能“看起来没生效”：
复杂点在于：fixed 布局一旦生效，列宽就彻底脱离内容弹性。后端返回超长字符串时，前端无法靠 CSS 自动适应，必须提前约定字段长度、服务端截断，或改用 CSS Grid 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
