必须用 table-layout: fixed + + 显式 定义才能实现真正的列宽比例，否则 width 属性仅作参考上限；需同时满足表格有明确总宽、 紧贴 后且无空格、每列均有对应 。

必须用 table-layout: fixed + <colgroup></colgroup> + 显式 <col> 定义，否则所谓“比例”只是幻觉。

为什么直接在 <td> 上写 <code>width="30%" 不生效

浏览器默认用 table-layout: auto，它会扫描整张表的内容（包括所有行、所有单元格）来算列宽，width 属性只当“参考上限”，不是指令。长文本、无空格 URL、中文身份证号这类内容一出现，列宽立刻被撑开，其他列被压缩甚至归零。

• <td width="30%">超长文本</td> 在 auto 模式下基本无效
• 即使写了 style="width: 30%"，没配 table-layout: fixed，照样被忽略
• 首行 <th> 或 <code><td> 的 <code>width 会被读取，但优先级低于 <col>，且只影响该列——不推荐依赖

  table-layout: fixed 必须和哪些条件一起用

  单独加 table-layout: fixed 是白加。它只负责“切换计算逻辑”，不提供宽度依据。真正让比例落地的，是三者缺一不可：

  

  HTML汇报生成器

  🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

  下载
  • <table> 上必须有明确总宽度，比如 <code>style="width: 100%" 或 style="width: 800px"；没有这个，百分比失去计算基准
  • <colgroup></colgroup> 必须紧贴 <table> 开始标签后、<code><thead> 前；位置错，整组失效 <li>每列都得有对应 <code><col>，不能漏；漏掉的列会 fallback 到自动计算，破坏比例

  示例（三列按 2:3:5 分配）：

  A

  B

  C

  容易被忽略的细节和副作用

  看起来写对了，但实际列宽还是飘，大概率栽在这几处：

  • <col> 的 width 必须用 CSS style 写，<col width="30%"> 是 HTML 属性，完全无效
  • 内容仍可能视觉上“撑宽”列：不是布局失效，而是换行或溢出行为；加 white-space: normal 和 word-break: break-word 控制
  • 父容器没设宽度（比如裸 <div>），<code>width: 100% 就失去参照，表格会收缩成最小内容宽
  • 混用单位（如 width: 100px 和 width: 30%）在 fixed 布局下会导致剩余空间分配异常，建议统一用 % 或 px

  最常被跳过的动作，是检查 <colgroup></colgroup> 是否真在 <table> 后、<code><thead> 前——哪怕多一个空格或注释，都可能导致整组失效。这不是容错设计，是规范硬性要求。</thead>