必须设置 table-layout: fixed 且用 的 css width（如 style="width:30%;"）才能稳定实现百分比列宽，仅设 width 或用 html width 属性均无效；需配合 white-space: nowrap 和 overflow: hidden 防内容撑宽。

直接用 table-layout: fixed + <col> 设置 CSS width 就能稳定实现列宽百分比分配，其他方式（比如只给 <td> 加 <code>width: 30%）在内容较长时大概率失效。

必须启用 table-layout: fixed

表格默认是 table-layout: auto，浏览器会扫描全部内容再算列宽，你写的 width 会被无视。只有设成 fixed，列宽才按你定义的走。

• table 元素上必须加 style="table-layout: fixed; width: 100%;"（width 值不一定是 100%，但要有明确值）
• 父容器如果没固定宽度（比如 div 没设 width），百分比列宽会计算失败
• 别用 HTML 的 width 属性（如 <table width="100%">），它和 CSS <code>width 不等价，且已过时

  <col> 的 width 必须是 CSS 属性，不是 HTML 属性

  <col width="30%"> 完全无效 —— 这是 HTML 属性，浏览器忽略。必须写成 <col style="width: 30%;"> 或用外部 CSS 选择器匹配。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • 推荐包在 <colgroup></colgroup> 里，语义清晰：<colgroup> <col style="width: 25%;"> <col style="width: 50%;"> </colgroup>
  • 第一行的 <th> 或 <code><td> 不能设 <code>width，否则会覆盖 <col> 定义
  • 列宽总和不必等于 100%，浏览器会按比例缩放；但设成 100% 更容易预期结果

  内容撑开列宽？加 white-space: nowrap 和 overflow: hidden

  即使用了 table-layout: fixed，长文本仍可能触发换行或溢出，导致视觉上“列变宽”。这不是布局失效，而是内容渲染行为。

  • 对 <td> 和 <code><th> 统一加 <code>white-space: nowrap; overflow: hidden;
  • 如需省略号，补上 text-overflow: ellipsis;（注意要同时设 display: block 或 inline-block）
  • 边框、padding、margin 会影响实际占用空间，建议全局加 box-sizing: border-box;

  不用 <col> 能不能做？可以，但更难控

  直接给 <th>/<code><td> 设 <code>width: 30% 看似简单，但实际效果取决于第一行内容长度 —— 浏览器仍会按 auto 模式部分介入计算。

  • 仅当所有列内容长度相近、且允许列宽浮动时可考虑
  • 想精确控制，尤其是含长文本或混合单位（px + %）时，<col> + fixed 是唯一可靠路径
  • IE11 及更老版本对 <col> 支持有限，但现代项目基本无需兼容

  真正卡住人的不是语法，而是忘记 table-layout: fixed 这个前提，或者把 HTML width 属性当成 CSS 用。只要这两点踩准，列宽百分比就是确定性行为，不看内容、不猜浏览器。

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