必须用 <colgroup> + table-layout: fixed 才能可靠实现表格列宽比例分配，直接在 <td>/<th> 上设百分比 width 不保证按比例生效，因默认 table-layout: auto 优先按内容撑开列宽。
直接用 width 属性在 <td> 或 <th> 上设百分比，**不保证按比例分配**——浏览器默认用 table-layout: auto，会优先按内容撑开列宽，width 只起“参考上限”作用，尤其当某列内容很长（比如无空格 URL）时，其他列会被压缩甚至归零。
用 <colgroup> + <col> 定义列宽比例
这是唯一能可靠实现列宽比例控制的方式，语义清晰、行为可预测。
-
<colgroup>必须紧跟在<table>开始标签后、<thead>之前，顺序错一列就全乱 - 每个
<col>对应一列，未声明的列回退到自动计算 - 支持
width="20%"（HTML 属性）或style="width: 30%"（CSS），百分比基于整个<table>宽度，不是父容器 -
<col>不继承字体大小，也不响应em/rem单位，只认像素、百分比和fr（Chrome/Firefox 支持但非标准，慎用）
示例：
<table style="width: 100%;">
<colgroup>
<col style="width: 20%">
<col style="width: 50%">
<col style="width: 30%">
</colgroup>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>短</td><td>这是一段非常长的内容，但不会破坏比例</td><td>中</td></tr>
</table>
必须配合 table-layout: fixed
只写 <col> 不生效？大概率漏了这个关键 CSS。默认 auto 布局下，浏览器反复测量首行内容决定列宽，<col> 的宽度被忽略。
立即学习“前端免费学习笔记（深入）”；
-
table-layout: fixed后，列宽完全由<col>或首行<th>/<td>的width决定 - 单独设
table-layout: fixed没用，必须有显式列宽定义（<col>或首行单元格的width） - 首行单元格的
width会被读取，但优先级低于<col>—— 所以优先用<col>
width 属性在单元格上还能用吗？
能，但仅限于“辅助微调”或兼容老项目，**不能依赖它做比例布局**。
- 在
<td width="30%">上设百分比，仅当没有<colgroup>且没设table-layout: fixed时才可能起作用，行为不可控 - 若同时存在
<col>和单元格width，<col>优先；若两者都无，浏览器按内容算 - 像素值如
width="120"在fixed布局下可作为 fallback，但建议统一用 CSSstyle="width: 120px"
真正想让三列按 2:5:3 分配空间，<colgroup> 加 table-layout: fixed 是绕不开的组合；漏掉任一环节，宽度就变成“看着像比例，实际随内容飘”。
