在现代浏览器中基本无效，因html5已废弃该属性；必须改用并配合table-layout: fixed和明确宽度（如width: 100%）才能生效。

直接写 <col width="30%"> 或只给 <table> 加 <code>width: 100%，列宽大概率不按预期生效——这不是你漏写了单位或拼错了标签，而是浏览器根本没把它当真。

为什么 width="30%" 在 <col> 上基本无效

HTML5 已将 <col> 的 width 属性标记为 obsolete（已过时），Chrome、Firefox、Safari 均不再用它参与布局计算。你看到的“似乎有点效果”，往往是残留兼容逻辑或打印样式路径的偶然行为，不能依赖。

• <col width="30%"> 是 HTML 属性，现代浏览器忽略它
• 真正起作用的是 CSS 的 style="width: 30%;"，且必须配合 table-layout: fixed
• 即使写了 width="30%"，也绝不会影响后续行的 <td> 宽度，因为 <code><col> 的语义作用范围仅限于列级布局，不继承、不传播

  table-layout: fixed 是百分比列宽的前提条件

  没有 table-layout: fixed，<col> 上的 CSS width 就像没插电的开关——看着在，按了没反应。浏览器默认用 auto 模式，按内容撑开列宽，百分比声明会被直接跳过。

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载
  • 必须同时设置：<table style="width: 100%; table-layout: fixed;"><li> <code>width: 100% 的参照是父容器，如果父容器没明确宽度（比如 <div> 没设 <code>width 或 max-width），这个百分比就失去意义
  • 启用 fixed 后，列宽只由第一行（或 <col>）定义，后续行的 <td> 宽度声明会被忽略 <h3>正确写法：用 <code><col> + CSS width，位置和单位都不能错

    <col> 必须紧贴 <table> 开始标签后、<code><thead> 前；单位只认 <code>%、px、em，不支持 fr 或 calc()；所有列宽之和不必等于 100%，浏览器会按比例重算，但设成 100% 更易预测结果。

    • ✅ 正确结构：

      A	B	C
      x	y	z

    • ❌ 错误写法：<thead><col></thead>（位置错）、<col width="30%">（用 HTML 属性）、<col style="width: 1fr;">（单位不支持）
    • ⚠️ 第一行 <th> 或 <code><td> 不要再设 <code>width，否则会覆盖 <col> 定义

      内容溢出时，width 只是起点，还得配 white-space 和 overflow

      table-layout: fixed 锁定了列宽，但长 URL、连续无空格英文、未约束的图片仍会撑破单元格或导致横向滚动。单靠 width 无法控制视觉表现。

      • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      • 自动换行：word-break: break-word; 或 overflow-wrap: break-word;，并确保 white-space: normal;
      • 图片破坏列宽：img { max-width: 100%; height: auto; }
      • 边框和 padding 影响总宽：box-sizing: border-box; 让 width 包含它们

      最容易被卡住的不是怎么写百分比，而是三个隐性前提：父容器有没有可计算宽度、table-layout: fixed 漏没漏、<col> 放没放在正确位置——这三个点一错，后面所有样式都白调。