必须同时设置table-layout: fixed和width: 100%，否则百分比列宽无效；父容器需有可计算宽度，列宽控制优先级为<col> > 首行th/td，内容溢出须配合white-space与overflow处理。
table-layout: fixed 必须和 width: 100% 同时出现
只写 width: 100% 表格几乎不会真占满父容器——因为浏览器默认用 table-layout: auto，列宽由内容决定，百分比宽度失去约束力。必须显式声明 table-layout: fixed，否则 width 值只是“名义上”生效，实际列宽仍被长文本或图片撑开。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见错误：在 <th> 或 <code><td> 上设 <code>width: 20%，但没配 table-layout: fixed，结果完全无效。
-
table元素必须同时带style="width: 100%; table-layout: fixed;" - 父容器（如
<div>）得有可计算宽度，比如 <code>max-width: 1200px或width: 100%，否则百分比无参照 -
table-layout: fixed在 IE8+ 和现代浏览器都支持，但 Outlook 邮件客户端（基于 Word 渲染引擎）不识别，发邮件时慎用 - 没写
<col>的列，会 fallback 到第一行<th> 的 <code>width；若也没设，就坍缩成最小内容宽，容易导致某列窄到看不见长文本、URL、连续英文会撑破列宽，必须额外处理
table-layout: fixed锁定了列宽计算逻辑，但不等于视觉上内容就“乖乖待着”。连续无空格字符串（如 URL、Base64 片段、日志 ID）会直接突破单元格边界，造成横向溢出或文字挤压。- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（需display: block或inline-block才生效） - 允许换行：
word-break: break-word;或overflow-wrap: break-word;，同时确保white-space: normal; - 图片破坏列宽：
img { max-width: 100%; height: auto; }，否则无视<col>宽度 - 边框和 padding 影响总宽：加
box-sizing: border-box;，让width: 100%包含它们
移动端小屏下别硬撑表格，该滚动就滚动
列数多（比如 >5 列）或内容复杂时，强行用百分比均分列宽会导致文字过小、操作区域难点击。这时候“自适应”不是让每列都变窄，而是让用户能横向滑动查看全部数据。
- 给表格外层容器加
overflow-x: auto;，并设width: 100% - 避免在容器上设
white-space: nowrap，否则整个容器被撑开 - 用
@media (max-width: 768px)把表格转成卡片堆叠布局，比强行压缩更可读 - 注意：iOS Safari 对
overflow-x: auto的滚动惯性支持较弱，必要时加-webkit-overflow-scrolling: touch;
width: 20%，而是忘了父容器有没有宽度、table-layout漏写了、或者<col>放错了位置——这三个点一错，整张表就“看起来写了，其实没用”。 - 单行截断：
用 <th style="width: 20%"> 或 <code><td width="30%"> 都不可靠：前者在 <code>fixed 模式下可能被忽略，后者是过时的 HTML 属性，且优先级低于 <col>。
<col> 是专为列级控制设计的语义元素，位置必须紧接在 <table> 开始标签后、<code><thead> 前，否则不生效。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>正确写法：<pre class="brush:php;toolbar:false;"><table style="width: 100%; table-layout: fixed;">
<col width="20%">
<col width="30%">
<col width="50%">
<thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
</table></pre></li>
<li>
<code>width 支持 %、px、em，不支持 fr（那是 Grid 的单位）
