width="100%"失效的根本原因是父容器无明确宽度且未设置table-layout:fixed；必须同时满足父容器有可计算宽度、table-layout:fixed启用、置于前三个前提，才能实现精确列宽控制。

width 属性能设宽度，但直接写在 <table> 上只起“最大宽度”作用，不是强制固定——尤其内容长、没配 <code>table-layout: fixed 时，很容易失效。

为什么 width="100%" 经常不占满父容器

百分比宽度需要两个硬性前提：父容器必须有可计算宽度（比如 div 明确写了 width 或 max-width），且 <table> 必须同时声明 <code>table-layout: fixed。缺一不可。

• 父容器没设宽（如空 <div>）→ 百分比失去参照，退化为 <code>auto
• 漏掉 table-layout: fixed → 浏览器仍按内容撑列，整表虽宽了，但列宽乱挤、文字换行或溢出
• <col> 没放对位置（必须紧贴 <table> 开始后、<code><thead> 前）→ 列宽定义被忽略 <h3> <code><col> 是唯一靠谱的列宽控制方式

  <col> 元素专为列级控制设计，优先级高于 <th>/<code><td> 上任何 <code>width 声明，且不依赖首行是否渲染完成。

  • 支持 px（如 <col width="120">）、%（如 <col style="width: 30%">），不支持 fr
  • 未声明的列会 fallback 到第一行对应单元格的 width，若也没写，就坍缩成最小内容宽
  • <col> 的百分比基于 <table> 宽度计算，不是父容器 <h3>内容溢出时，<code>width 不管用，得靠 CSS 配合

    table-layout: fixed 锁定了列宽，但长文本、无空格 URL、图片仍会撑破单元格——此时 width 属性已无视觉约束力。

    

    Doc To HTML

    使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

    下载
    • 单行截断：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; }
    • 边框影响总宽：box-sizing: border-box; 让 width: 100% 包含边框和 padding

    最易被忽略的不是怎么写 width，而是父容器有没有宽度、table-layout 没设、以及 <col> 放错了位置——这三个点卡住，后面所有样式都白调。