必须同时设置 table-layout: fixed 和 table 宽度，否则百分比列宽无效；col 的 width 属性已废弃，需用 CSS style="width: x%" 且仅在 fixed 模式下生效。
直接给 <table> 写 width: 100% 不够，必须同时启用 table-layout: fixed，否则百分比列宽根本不会生效——这是 90% 的人卡住的第一步。
为什么 <col width="30%"> 不起作用
HTML5 已将 col 的 width 属性标记为 obsolete（已废弃），现代浏览器（Chrome/Firefox/Safari）基本忽略它。你写的 <col width="30%"> 看似合理，实际只是个无效声明。
- 必须改用 CSS 的
style="width: 30%"绑定在<col>上，且仅在table-layout: fixed下才被尊重 -
<col>本身不渲染，它的宽度只影响后续所有行的对应列，所以不能靠它“撑开”表格——<table>自身必须有明确宽度 - 如果父容器是
display: flex，且未设置主轴方向或未约束宽度，width: 100%可能计算为 0
table-layout: fixed 是列宽可控的前提
不加这个声明，浏览器默认用 table-layout: auto：它会扫描所有行、所有单元格内容，找出每列最大宽度再分配——此时你设的百分比会被完全无视，响应式也容易断裂。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 加上后，列宽只由第一行
<th>/<td>或<col>的 CSSwidth决定，后续内容再长也不会撑开列 - 推荐用
<colgroup>+<col>，避免首行单元格被 JS 动态修改导致宽度错乱 - 列宽之和不必严格等于 100%，浏览器会按比例缩放；但设成 100% 更易预测行为
完整可运行代码示例（含防溢出处理）
以下代码能真正让三列按 30%/50%/20% 分配，且在移动端不横向滚动：
立即学习“前端免费学习笔记（深入）”；
<div style="width: 100%; max-width: 800px;">
<table style="table-layout: fixed; width: 100%; border-collapse: collapse; box-sizing: border-box;">
<colgroup>
<col style="width: 30%;">
<col style="width: 50%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr><th>姓名</th><th>邮箱</th><th>状态</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>long-email-address@example.com</td><td>在职</td></tr>
</tbody>
</table>
</div>
<style>
td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
img { max-width: 100%; height: auto; }
</style>
-
<div>提供明确宽度上下文，max-width防止大屏下过宽 -
box-sizing: border-box确保边框和 padding 不撑出总宽 -
white-space: nowrap+overflow: hidden+text-overflow: ellipsis控制单行溢出，<td>默认是table-cell，可直接生效 - 图片必须加
max-width: 100%，否则会破坏列宽基准
最易被忽略的是：表格自身没宽度，所有列宽声明都白写；而一旦用了 table-layout: fixed，内容溢出就立刻变得可见——这两点必须同步处理，缺一不可。
