table-layout: fixed能让列宽等分生效，是因为它启用固定布局算法，使浏览器依据显式宽度（如或首行单元格width）而非内容自动计算列宽；必须配合table的width声明，否则退为均分。
table-layout: fixed 为什么能让列宽等分生效
默认情况下 table 是 table-layout: auto，浏览器会根据内容宽度动态计算列宽，width 属性（比如 width: 20%）常被忽略。只有设为 table-layout: fixed，表格才按 CSS 指定的宽度分配空间，后续的百分比、像素或 fr（需配合 display: grid 替代方案）才能真正起效。
注意：一旦启用 table-layout: fixed，第一行 <tr> 中的 <code><th> 或 <code><td> 的 <code>width 值（或 CSS width）会作为整列基准，后续行内容超出也不会撑开列宽 —— 这是“等分”可控的前提，但也意味着要小心内容溢出。
- 必须给
<table> 设置 <code>width: 100%或具体值，否则fixed下列宽计算失去参照 -
<col>元素在fixed模式下最可靠，比直接设<th> 宽度更优先<li>若用 <code>width: 25%四列等分，但父容器有 padding 或 border，实际可能错位，建议父容器用box-sizing: border-box
用 <col> 实现精确比例分配（如 2:3:1）
想让三列按比例 2:3:1 分配，不是写 width: 33.33%，而是换算成总份数（2+3+1=6），再算每列占比：33.33%、50%、16.67%。但浮点误差和四舍五入会让合计偏离 100%，更稳的方式是用 <col> + width 配合 table-layout: fixed：
| A | B | C |
⚠️ 注意：fr 单位在 <col> 中**不被原生支持**（仅 Grid/Flex 支持），上面写法实际无效。正确做法是用像素或百分比换算：
- 写成
width: 33.33%、width: 50%、width: 16.67%，并确保三者之和严格为100%（可微调为33.34%、50%、16.66%） - 或用整数像素：设
<table width="600">，然后 <code><col width="200"> <col width="300"> <col width="100"> - 如果列数多、比例复杂（如 7:2:5:1），建议先用 JS 算出各列像素值再注入，避免手算误差
- 加
table { table-layout: fixed }后，再给<td> 设 <code>overflow: hidden; text-overflow: ellipsis; white-space: nowrap可控截断 - 对可换行内容，用
word-break: break-all或overflow-wrap: break-word，但注意中文下break-all可能断字，优先试overflow-wrap -
<col>上设width无法限制最小宽度，真正起作用的是单元格级样式，所以关键控制点在<td> 和 <code><th> <h3>现代替代方案：用 CSS Grid 模拟表格布局更可控</h3> <p>纯展示型表格（无排序、无语义化需求）若只求列宽精确控制，用 <code>display: grid比<table> 更灵活，尤其涉及比例、响应式或跨列时：<pre class="brush:php;toolbar:false;">.grid-table { display: grid; grid-template-columns: 2fr 3fr 1fr; width: 100%; } .grid-row { display: contents; } .grid-cell { min-width: 0; } /* 防止内容撑开 */ </pre> <p>优势在于：<code>fr原生支持、自动处理溢出、无需table-layout等魔幻规则；劣势是丧失 HTML 表格的语义（role="table"需手动补）、屏幕阅读器兼容性略弱、无法使用<thead>/</thead> <tbody> 语义分组。<p>真正难的不是算百分比，而是判断该不该用 <code><table> —— 如果只是“看起来像表格”，Grid 几乎总是更稳；如果数据需要导出 Excel、被爬虫解析、或依赖辅助技术，那还是老老实实用 <code><table>，并接受它那一套数学约束。</table>
内容过长导致列宽失守的典型表现与应对
即使用了 table-layout: fixed，当某单元格含超长无空格字符串（如一长串 base64 或 UUID），浏览器仍可能强行撑开该列，破坏预设比例。这不是 bug，而是 CSS 的「最小内容宽度」（min-content）机制在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
