table-layout: fixed 必须与 width: 100% 同时设置才能使表格真正撑满父容器；否则浏览器按 auto 模式计算列宽，百分比无效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
table-layout: fixed 必须和 width: 100% 同时出现
只写 width: 100%，表格几乎不会真正撑满父容器——浏览器默认用 table-layout: auto，列宽由最长内容决定，百分比设置形同虚设。必须显式声明 table-layout: fixed，它才会忽略后续行内容，只读第一行 <th> 或 <code><col> 的宽度值。
常见错误包括：
– 在 <th> 上写了 <code>style="width: 25%"，但没配 table-layout: fixed
– 父容器是 display: inline 或未设宽度（如 max-width 缺失），导致百分比无参照
– 把 <col> 放在 <thead> 里面，实际必须紧接在 <code><table> 开始标签后
<h3>小屏下用 data-label + display: block 堆叠每行数据</h3>
<p>当列数 ≥ 4 或字段语义强（如“下单时间”“收货人电话”）时，横向滚动体验极差，且用户无法记住滑动后各列对应关系。此时应让表格“退化”为语义块结构，而非压缩列宽。</p>
<p>关键操作：<br>– HTML 中每个 <code><td> 加 <code>data-label 属性：<td data-label="订单号">ORD-2026-7890</td>
– 媒体查询中将 <tr> 设为 <code>display: block，<td> 也设为 <code>display: block
– 用 td::before { content: attr(data-label); } 插入表头文字
– 避免用 float 或 inline-block，窄屏下易错位；伪元素默认 inline，需加 display: inline-block 才可控对齐与截断
立即学习“前端免费学习笔记（深入）”；
长文本、URL、Base64 会撑破列宽，必须单独处理
table-layout: fixed 锁定了列宽计算逻辑，但不阻止内容溢出视觉边界。连续无空格字符串（如 https://example.com/very/long/path）会直接突破设定宽度。
应对方式取决于语义需求：
– 允许断词换行：word-break: break-all（粗暴有效）或 overflow-wrap: break-word（优先在空格处断）
– 强制单行+截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需配合 display: block 和明确 max-width
– 图片必须加 img { max-width: 100%; height: auto; }，否则无视列宽约束
– 禁用 white-space: nowrap 在 <td> 上，除非你真想禁换行
<h3>列数多时，外层水平滚动比压缩更务实</h3>
<p>后台报表、财务明细等场景，字段不能删、列数常超 6 列，强行均分百分比会导致文字过小、按钮难点击、可读性归零。这不是 CSS 失效，而是 <code>table 的语义本质不匹配窄屏阅读逻辑。
可行方案：
– 表格外层容器加 overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 惯性滚动）
– <table> 设 <code>min-width: fit-content 或具体值（如 min-width: 1200px），防内容被压缩变形
– 确保父容器有明确宽度（如 max-width: 100%），否则滚动条可能不触发
– 不要在 <td> 上加 <code>white-space: nowrap，否则无空格长文本会直接撑爆容器
最容易被忽略的不是怎么写样式，而是三个前提是否同时满足：父容器有可计算宽度、table 上同时存在 width: 100% 和 table-layout: fixed、至少一列通过 <col> 或首行 <th> 显式声明宽度。漏掉任一环，后续所有调整都只是在补救表象。</th>
