table-layout: fixed 是使百分比列宽生效的必要前提，需同时设置 table 元素的 table-layout: fixed 和明确总宽度（如 width: 100%），且列宽必须在 col 元素上用 width 属性声明。
table-layout: fixed 是百分比列宽生效的前提
不设 table-layout: fixed，所有 width: 30% 都是摆设。浏览器默认用 table-layout: auto，会扫描整表内容再算列宽，你写的百分比直接被忽略。只有切到 fixed 模式，列宽才按声明值走，和内容长度无关。
必须同时满足两个条件：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
table元素上显式设置style="table-layout: fixed;" -
table还得有明确总宽度，比如width: 100%或width: 800px；只写width: 100%但父容器没宽，百分比照样失效
别在 <td> 或 <code><th> 上反复写 <code>width: 25%，它在 fixed 模式下优先级低于 <col>，且第一行内容仍可能干扰计算。用 <col> 才是语义正确、行为确定的路径。
关键细节：
立即学习“前端免费学习笔记（深入）”；
-
<col>必须放在<table> 开始后、<code><thead> 前，位置错就整个失效 <li> <code>width必须是 CSS 属性，<col width="30%">完全无效；得写成<col style="width: 30%"> - 每列都得显式声明，漏一列，它就会回退到自动计算，破坏整体比例
- 列宽总和不必等于 100%，浏览器会按比例缩放；但设成 100% 更易预期结果
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 自动换行：
word-break: break-word;+white-space: normal; - 图片破坏列宽：
img { max-width: 100%; height: auto; } - 边框和 padding 影响总宽：全局加
box-sizing: border-box; - 所有中间容器（如
div.wrapper、section、form）都需显式设宽，比如width: 100%或max-width: 1200px - 避免用
width: 100vw，滚动条存在时会触发横向溢出
内容溢出会让“看起来没生效”
即使 table-layout: fixed 和 <col> 全对，长文本、URL、连续无空格英文仍可能撑破单元格——这不是布局失败，而是渲染行为。需要额外样式约束视觉表现：
父容器宽度缺失是最常见的失效原因
很多人写了 width: 100% 却没效果，问题不在表格本身，而在它的父级。百分比永远相对于包含块的 content box 宽度，如果父 div 没设宽（比如只是裸 <div>），那子表格的 100% 就是 “一个不确定值的一半”，结果不可控。
<p>检查链条是否完整：</p>
<ul>
<li>
<code>html, body { margin: 0; }（body 默认有 8px margin）
真正卡住人的从来不是语法，而是三处隐性依赖：父容器有没有宽、table-layout: fixed 设没设、<col> 放没放在正确位置。漏掉任意一个，都会回到“写了但没用”的状态。
