table-layout: fixed 能让列宽稳定，因其将列宽计算提前至首行渲染时完成，后续各行严格服从该宽度，不随内容长度变化；而 auto 模式需遍历全部内容后动态分配，导致列宽不可控且易错位。
table-layout: fixed 为什么能让列宽“稳定下来”
因为 table-layout: fixed 把列宽计算提前到渲染第一行时就完成，后续所有行都必须服从这个宽度——哪怕某单元格塞进一长串无空格数字（比如 100000000000000000000），它也不会撑开整列。而 table-layout: auto 是等全部内容加载完、逐个测量后才分配列宽，结果就是：同一列在不同行里可能忽宽忽窄。
实操建议：
- 必须显式声明
table-layout: fixed，只设width: 100%不起作用 - 列宽基准优先级是：
<col>元素的width> 首行<th>/<code><td> 的 <code>width属性 > 平均分配 - 如果首行有
colspan，该单元格的宽度仍参与列轨道计算，容易导致后续列偏移，尽量避免 -
width属性写了但没生效 → 很可能漏了table-layout: fixed - 设置了
width: 100px却看到列宽远大于此 → 内容触发了浏览器的最小宽度保护（通常约总宽 2%） - 表格高度莫名增高 →
auto模式下换行逻辑更复杂，尤其遇到white-space: nowrap时容易溢出 - 必须加
word-break: break-all或word-wrap: break-word（后者已废弃，推荐用overflow-wrap: break-word） -
white-space: normal要显式设置，否则默认可能是nowrap - 如果想保留单词完整性，用
overflow-wrap: break-word+hyphens: auto（注意 Safari 需加前缀） - 用
<colgroup> <col width="150"> <col width="200"> </colgroup>，比在每行重复写width清晰且稳定 -
<col>的width支持像素、百分比，但不支持calc()或fr单位 - 若表格有表头固定（
thead）、内容滚动（tbody），<col>仍能统一控制全表列宽，th上设宽则可能失效
auto 模式下“列宽被内容撑开”的典型表现
你给第一行 <th width="20%">，但第二行某个 <code><td> 里放了超长英文或数字串，整列就突然变宽，其他列被迫压缩——这就是 <code>table-layout: auto 在“尽职尽责”地适配内容。它没有错，只是不适合需要视觉对齐的场景。
常见错误现象：
fixed 模式下如何让文字自动换行不溢出
table-layout: fixed 本身不处理换行，它只管列宽；换行得靠额外 CSS 控制。否则长文本会直接溢出、重叠甚至把相邻列盖住。
关键组合写法：
示例：<table style="table-layout: fixed; width: 100%; word-break: break-all;">
<h3>col 元素比 th/td 上设 width 更可靠的原因</h3>
<p><code><col> 是唯一能在渲染前就定义列轨道的方式。它不依赖内容、不受 min-width 或父容器约束干扰，也不受 display 变化影响。而 <th width="150"> 这种写法，在现代 CSS 中实际等价于内联 <code>width: 150px，极易被层叠样式覆盖。
实操要点：
真正容易被忽略的是：即使用了 table-layout: fixed，如果完全没指定任何列宽（既无 <col>，首行也无 width），浏览器会按内容最小宽度粗略分配，结果往往不是你想要的“等宽”，而是“坍缩后勉强可见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
