必须用 table-layout: fixed + <colgroup> + 显式 <col> 定义才能实现真正的列宽比例，否则 width 属性仅作参考上限；需同时满足表格有明确总宽、<colgroup> 紧贴 <table> 后且无空格、每列均有对应 <col>。
必须用 table-layout: fixed + <colgroup> + 显式 <col> 定义，否则所谓“比例”只是幻觉。
为什么直接在 <td> 上写 width="30%" 不生效
浏览器默认用 table-layout: auto，它会扫描整张表的内容（包括所有行、所有单元格）来算列宽，width 属性只当“参考上限”，不是指令。长文本、无空格 URL、中文身份证号这类内容一出现，列宽立刻被撑开，其他列被压缩甚至归零。
-
<td width="30%">超长文本</td>在 auto 模式下基本无效 - 即使写了
style="width: 30%"，没配table-layout: fixed，照样被忽略 - 首行
<th>或<td>的width会被读取，但优先级低于<col>，且只影响该列——不推荐依赖
table-layout: fixed 必须和哪些条件一起用
单独加 table-layout: fixed 是白加。它只负责“切换计算逻辑”，不提供宽度依据。真正让比例落地的，是三者缺一不可：
-
<table>上必须有明确总宽度，比如style="width: 100%"或style="width: 800px"；没有这个，百分比失去计算基准 -
<colgroup>必须紧贴<table>开始标签后、<thead>前；位置错，整组失效 - 每列都得有对应
<col>，不能漏；漏掉的列会 fallback 到自动计算，破坏比例
示例（三列按 2:3:5 分配）：
立即学习“前端免费学习笔记（深入）”；
<table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 20%">
<col style="width: 30%">
<col style="width: 50%">
</colgroup>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
容易被忽略的细节和副作用
看起来写对了，但实际列宽还是飘，大概率栽在这几处：
-
<col>的width必须用 CSSstyle写，<col width="30%">是 HTML 属性，完全无效 - 内容仍可能视觉上“撑宽”列：不是布局失效，而是换行或溢出行为；加
white-space: normal和word-break: break-word控制 - 父容器没设宽度（比如裸
<div>），width: 100%就失去参照，表格会收缩成最小内容宽 - 混用单位（如
width: 100px和width: 30%）在 fixed 布局下会导致剩余空间分配异常，建议统一用 % 或 px
最常被跳过的动作，是检查 <colgroup> 是否真在 <table> 后、<thead> 前——哪怕多一个空格或注释，都可能导致整组失效。这不是容错设计，是规范硬性要求。
