table-layout: auto 下列宽不等比是因为浏览器按每列最大内容宽度计算基准，而非均分；要等宽需用 min/max-width 锁定列宽并配合 word-break: break-word。
为什么 table-layout: auto 下列宽不等比？
因为浏览器默认按内容宽度计算列宽：auto 模式会扫描所有单元格内容（包括换行、空格、内联元素），取每列最大内容宽度作为该列基准，再结合 min-width 和容器约束做调整。结果往往是“内容最长的列最宽”，而非“各列均分”。想让三列等宽，但一列塞了长文本，其他列就会被压缩——这不是 bug，是规范行为。
用 width 百分比强制等分时要注意什么？
在 table-layout: auto 下直接给 <col> 或 <th>/</th>
<td> 设 <code>width: 33.33% 通常无效：浏览器仍优先尊重内容宽度，百分比只作最小参考。真正起效的前提是——所有列内容宽度 ≤ 容器宽度 × 百分比，否则会被撑开。
-
<col>标签必须放在<colgroup></colgroup>内，且需与列顺序严格对应 - 给
<th> 设 <code>width比给<col>更可靠（尤其含 colspan 的表） - 避免在单元格内用
white-space: nowrap，它会直接破坏等比逻辑
如何让 table-layout: auto 真正“等比例”又保留内容自适应？
核心思路是切断内容对列宽的主导权，但不切换到 fixed（那样会丢失自动换行和内容适配）。可行做法是：用 min-width + max-width 限制每列范围，并配合 word-break: break-word。
| 超长文本不会撑开这一列 | 短 | 中等 |
注意：min-width 和 max-width 相等才能锁死宽度；word-break: break-word 是关键，否则中文/长英文单词仍会溢出或撑列。
遇到表格嵌套或复杂样式时容易漏掉什么？
外层容器设了 overflow-x: auto，但内部 table 没设 width: 100%，会导致列宽计算基于视口而非父容器；border-collapse: collapse 会影响边框占用空间，间接干扰百分比精度；还有更隐蔽的：某些 CSS 框架（如 Bootstrap）会给 <th> 加 <code>text-align: center 和 padding，这些内边距会参与宽度计算，导致 33% 实际不够分。
最常被忽略的是：没重置 box-sizing。建议统一加 table, th, td { box-sizing: border-box; }，否则 padding 和 border 都会额外加宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
