table-layout: fixed 是比例分配的前提，必须配合表格明确宽度（如width: 100%）和严格匹配列数的<col>标签才能使百分比生效；<col>上直接写width="30%"无效，须用style="width: 30%"且所有列均需显式定义，否则未声明列会破坏比例。
table-layout: fixed 是比例分配的前提
直接写 width="30%" 在 <col> 或 <td> 上，不加 table-layout: fixed，浏览器仍按内容撑开列宽，百分比几乎无效。auto 布局下，width 只是“建议值”，不是指令。
必须显式设置：table { table-layout: fixed; }，且表格要有明确总宽度（如 width: 100% 或 width: 800px），否则百分比失去计算基准。
- 没设
table-layout: fixed→ 百分比被忽略，列宽由首行内容决定 - 设了
table-layout: fixed但没给table设宽度 → 百分比无参照，结果不可控 -
<colgroup>必须紧贴<table>开始后、<thead>前，顺序错或位置错，整组失效
用 <col> 设置列宽比例最可靠
<col> 是唯一能按列声明比例的原生方式，比在 <th>/<td> 上反复写 style="width: 25%" 更干净、更易维护。
示例：三列按 2:3:5 分配，总宽 100% → 对应 20%、30%、50%
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<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百分比基于table宽度，不是父容器宽度 - 未声明的列会回退到自动计算（可能破坏比例），所以每列都要显式定义
- 不要混用像素和百分比（如
width: 100px+width: 50%），fixed 布局下会导致剩余空间分配异常
width 属性在 <td>/<th> 上的行为陷阱
在单元格上写 width="30%" 或 style="width: 30%"，只在 auto 布局下起弱作用，且优先级低于 <col>；在 fixed 布局下，它会被首行单元格的宽度覆盖——但仅当没有 <colgroup> 时才生效，非常不稳定。
- 同一列多个
<td>写不同width→ 取最大值，不是平均或叠加 - 首行
<th>的width会影响整列，但后续行同列的width被忽略 - 用
width属性（HTML 属性）而非 CSSwidth，在现代项目中已不推荐，兼容性和可维护性差
内容撑破比例怎么办？关键收束手段
即使列宽设为 20%，一长串无空格文本（如 URL）仍会强行撑开整列，破坏比例。这不是 bug，而是浏览器默认行为。
必须配合以下 CSS 才能守住比例：
-
td, th { white-space: nowrap; }—— 防止换行，但会让内容溢出 -
td, th { overflow: hidden; text-overflow: ellipsis; }—— 截断并显示省略号（需同时设display: block或inline-block） -
td, th { word-break: break-all; }—— 强制在任意字符处换行（适合纯文本，但可能割裂单词）
真正要兼顾可读与比例，往往得组合使用：white-space: nowrap + max-width + text-overflow，而不能只依赖 width。
比例控制本身不难，难的是让内容不越界——这点容易被忽略，直到上线后发现某列突然变宽两倍。
