table-layout: fixed 是比例分配的前提，必须配合表格明确宽度（如width: 100%）和严格匹配列数的标签才能使百分比生效；上直接写width="30%"无效，须用style="width: 30%"且所有列均需显式定义，否则未声明列会破坏比例。

table-layout: fixed 是比例分配的前提

直接写 width="30%" 在 <col> 或 <td> 上，不加 <code>table-layout: fixed，浏览器仍按内容撑开列宽，百分比几乎无效。auto 布局下，width 只是“建议值”，不是指令。

必须显式设置：table { table-layout: fixed; }，且表格要有明确总宽度（如 width: 100% 或 width: 800px），否则百分比失去计算基准。

• 没设 table-layout: fixed → 百分比被忽略，列宽由首行内容决定
• 设了 table-layout: fixed 但没给 table 设宽度 → 百分比无参照，结果不可控
• <colgroup></colgroup> 必须紧贴 <table> 开始后、<code><thead> 前，顺序错或位置错，整组失效 <h3>用 <code><col> 设置列宽比例最可靠

  <col> 是唯一能按列声明比例的原生方式，比在 <th>/<code><td> 上反复写 <code>style="width: 25%" 更干净、更易维护。

  示例：三列按 2:3:5 分配，总宽 100% → 对应 20%、30%、50%

  A

  B

  C

  • <col> 的 width 百分比基于 table 宽度，不是父容器宽度
  • 未声明的列会回退到自动计算（可能破坏比例），所以每列都要显式定义
  • 不要混用像素和百分比（如 width: 100px + width: 50%），fixed 布局下会导致剩余空间分配异常

  width 属性在 <td>/<code><th> 上的行为陷阱 <p>在单元格上写 <code>width="30%" 或 style="width: 30%"，只在 auto 布局下起弱作用，且优先级低于 <col>；在 fixed 布局下，它会被首行单元格的宽度覆盖——但仅当没有 <colgroup></colgroup> 时才生效，非常不稳定。

  • 同一列多个 <td> 写不同 <code>width → 取最大值，不是平均或叠加
  • 首行 <th> 的 <code>width 会影响整列，但后续行同列的 width 被忽略
  • 用 width 属性（HTML 属性）而非 CSS width，在现代项目中已不推荐，兼容性和可维护性差

  内容撑破比例怎么办？关键收束手段

  即使列宽设为 20%，一长串无空格文本（如 URL）仍会强行撑开整列，破坏比例。这不是 bug，而是浏览器默认行为。

  
  anything-to-html
  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
  下载

  必须配合以下 CSS 才能守住比例：

  • td, th { white-space: nowrap; } —— 防止换行，但会让内容溢出
  • td, th { overflow: hidden; text-overflow: ellipsis; } —— 截断并显示省略号（需同时设 display: block 或 inline-block）
  • td, th { word-break: break-all; } —— 强制在任意字符处换行（适合纯文本，但可能割裂单词）

  真正要兼顾可读与比例，往往得组合使用：white-space: nowrap + max-width + text-overflow，而不能只依赖 width。

  比例控制本身不难，难的是让内容不越界——这点容易被忽略，直到上线后发现某列突然变宽两倍。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！