width属性在table或td上设百分比多数情况下失效，因浏览器忽略它；唯一可靠方式是用colgroup+col配合table-layout:fixed。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

直接用 width 属性在 <td> 或 <code><th> 上设百分比，多数情况下不起作用——浏览器会忽略它，尤其在现代标准模式下。 <h3>为什么 <code>width 属性在单元格上经常失效

HTML5 已废弃 <td width="30%"> 这类写法；即使浏览器兼容，它的行为也极不可靠：只在 <code>table-layout: auto（默认）下作为“建议宽度”参与计算，实际列宽仍由内容撑开。一长串无空格文本（如 URL）就能让整列突破设定值，其他列被压缩变形。

• <th width="70%"> 在 HTML4 中合法，但现代项目中不推荐 <li>Chrome/Firefox/Edge 对内联 <code>width 的支持已降级为“尽力而为”，不保证结果
• 若表格有 table-layout: fixed，<td width="..."> 会被完全忽略，只认 <code><col> 或 CSS width

  真正可控的列宽比例设置方式：用 <colgroup></colgroup> + <col>

  这是唯一语义清晰、跨浏览器稳定、且能精确表达“比例”的方案。关键点是：<colgroup></colgroup> 必须紧贴 <table> 开始后、且在 <code><thead> 前；每项 <code><col> 顺序对应一列。

  • 支持像素值：<col width="120">
  • 支持百分比：<col style="width: 30%">（注意：基于整个 <table> 宽度，不是父容器） <li>支持 <code>fr 单位（仅 Chrome/Firefox，非标准，慎用于生产）：<col style="width: 1fr">
  • 未声明的列会回退到自动计算，所以必须显式写出所有列

  <table style="width: 100%;">
    <colgroup>
      <col style="width: 25%">
      <col style="width: 50%">
      <col style="width: 25%">
    </colgroup>
    <tr><th>A</th><th>B</th><th>C</th></tr>
    <tr><td>text</td><td>longer text here</td><td>short</td></tr>
  </table>

  必须搭配 table-layout: fixed 才能按比例生效

  没有它，<col> 的百分比只是“最大可用宽度”的参考，浏览器仍会优先按内容重算列宽。加了 table-layout: fixed 后，列宽才真正由 <col> 或首行单元格的 width 决定，且后续所有行都严格对齐。

  立即学习“前端免费学习笔记（深入）”；

  • 单独写 table { table-layout: fixed; } 没用，必须配合显式列宽定义（<col> 或首行 <th width="...">） <li> <code><col> 的优先级高于首行单元格的 width 或 style="width:..."
  • 一旦启用 fixed，单元格内文字溢出需手动处理：white-space: nowrap 或 overflow: hidden

  替代方案：纯 CSS 控制，但要注意兼容边界

  如果无法改 HTML 结构（比如 CMS 输出固定模板），只能靠 CSS。此时需同时控制三处：

  • 表格本身：table { table-layout: fixed; width: 100%; }
  • 列定义：col:nth-child(1) { width: 20%; }（注意：<col> 不支持伪类，得用类名或属性选择器）
  • 单元格最小约束：td, th { min-width: 80px; } 防止过窄，尤其在小屏下

  真正麻烦的不是怎么写，而是不同浏览器对 table-layout: fixed 下百分比 <col> 的解析细微差异——比如 Safari 对 width: 33.33% 可能四舍五入导致最后一列错位，这时用整数百分比（33% / 34% / 33%）反而更稳。