必须同时设置 table-layout: fixed 和 table 显式宽度（如 width: 100%），且父容器需有可计算宽度；仅设其中之一或忽略 正确位置，均会导致列宽失控、小屏挤压或文本溢出。

table-layout: fixed 是唯一能真正约束列宽的起点，但单独加它或只写 width: 100% 都无效——必须同时存在，且父容器要有可计算宽度，否则小屏下文字挤压、横向溢出、列宽崩坏是常态。

为什么 width: 100% 单独不生效

浏览器默认用 table-layout: auto，会等所有内容（比如长 URL、未缩放图片、连续无空格日志 ID）加载完才算列宽。此时 width: 100% 只让 <table> 撑满父容器，对列宽毫无约束力。更常见的是父容器本身没设宽度（如 <code><div> 缺 <code>width 或 max-width），导致百分比失去参照。

• <table> 必须同时带 <code>style="width: 100%; table-layout: fixed;"
• 父容器（如 <div class="table-wrapper">）需有明确宽度：<code>max-width: 1200px 或 width: 100%
• <col> 必须紧接在 <table> 开始标签后、<code><thead> 前，否则不生效 <h3>怎么用 <code><col> 稳定控制列宽

  <col> 是专为列级控制设计的语义元素，优先级高于 <th> 或 <code><td> 上的 <code>width 声明，且不依赖首行内容是否渲染完成。混用单位（如 width="200px" 和 width="30%"）可能触发浏览器回退到 auto 模式。

  • 推荐写法：

    A	B	C

  • width 支持 %、px、em，不支持 fr
  • 没写 <col> 的列，会 fallback 到第一行 <th> 的 <code>width；若也没设，就坍缩成最小内容宽，容易窄到看不见

    长文本撑破列宽怎么办

    即使用了 table-layout: fixed，纯字母/数字长串（如 https://example.com/very/long/path、Base64 片段）仍会突破设定宽度。这不是 CSS 失效，而是文本本身拒绝换行。

    

    Doc To HTML

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

    下载
    • 允许自然断行：word-break: break-word; 或 overflow-wrap: break-word;，同时确保 white-space: normal;
    • 粗暴但有效：word-break: break-all;（慎用于中文场景）
    • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需 display: block 才生效
    • 图片必须加：img { max-width: 100%; height: auto; }，否则无视列宽

    小屏下该滚动还是堆叠

    列数 ≥ 4 或字段语义强（如“下单时间”“收货人电话”）时，横向滚动对用户极不友好——滑动中根本记不住哪列是啥。此时应退化为语义块结构，而非压缩表格本身。

    • 给每个 <td> 加 <code>data-label：<td data-label="订单号">ORD-2026-7890</td>
    • 媒体查询里把 <tr> 设为 <code>display: block，<td> 也设 <code>display: block
    • 用 <td>::before { content: attr(data-label); } 插入表头，别用 <code>float 或 inline-block
    • 报表类表格（后台数据列表、财务明细）则适合外层加 overflow-x: auto，并设 min-width: fit-content 防内容被压缩变形

    最容易被忽略的不是样式怎么写，而是三个硬性前提：父容器有没有明确宽度、table-layout: fixed 和 width: 100% 是否同时存在、<col> 是否放在正确位置。漏掉任何一个，后面所有 word-break 或媒体查询都只是在补漏洞。