表格 width: 100% 溢出父容器的根本原因是 table-layout: auto 下列宽由内容决定，需改用 table-layout: fixed 并配合 width: 100%、 定义列宽及单元格 max-width: 0 + word-break: break-word 才能真正约束。

直接写 width: 100% 却撑出父容器，不是 CSS 写错了，而是表格布局机制在“暗中作祟”——table-layout: auto 下，列宽由内容决定，100% 只作用于表格外框，内部列一撑就溢出。

Doc To HTML

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

下载

为什么 width: 100% 会让 table 超出父容器

浏览器对 <table> 的默认布局是 <code>table-layout: auto，它会等所有单元格内容（尤其是长英文、URL、未换行文本）加载完再动态计算列宽。哪怕你写了 width: 100%，也只是把“最终算出来的总宽度”拉到父容器 100%，而这个“最终宽度”本身可能远超父容器——比如一列塞了 50 个连续字母，浏览器硬给它留出空间，整行就横向突破。

• 父容器没设 overflow: hidden 或 overflow-x: auto，溢出部分直接显示出来
• <th> 或 <code><td> 上的 <code>width 属性在 auto 模式下被忽略，不起作用
• 用了 padding 或 border 但没设 box-sizing: border-box，实际宽度 = content + padding + border

table-layout: fixed 必须配合 width: 100% 和显式列宽

只有三者同时存在，才能真正让表格“听话地占满且不溢出”。table-layout: fixed 不是开关，是切换布局逻辑：它只读第一行 <th> 或 <code><col> 的 width 值，不再等全部内容。

• <table> 必须有 <code>width: 100%（CSS）或 width="100%"（HTML 属性），否则 fixed 不生效
• <col> 要紧贴 <table> 开始标签后、<code><thead> 前，例如：<pre class="brush:php;toolbar:false;"></pre> <table style="width: 100%; table-layout: fixed;"> <col width="25%"> <col width="25%"> <col width="50%"> <thead>...<li>避免混用 <code>px 和 % 列宽，百分比列加起来不必等于 100%，浏览器会自动归一化；但全用 px 时，总和超过父宽仍会溢出

内容溢出必须作用在 <td> 和 <code><th> 上<p><code>word-break: break-word 或 overflow-wrap: break-word 这类规则，加在 <table> 上无效。它们得落在单元格内部，且需配合 <code>max-width 才能触发换行。

• 给所有 <td> 和 <code><th> 加：<pre class="brush:php;toolbar:false;">td, th { word-break: break-word; overflow-wrap: break-word; max-width: 0; /* 强制启用换行 */ }</pre> <li>如果单元格里有图片或 inline-block 元素，额外加 <code>white-space: normal
• 避免对 <table> 设 <code>min-width，它会覆盖 100% 行为，导致小屏下强制横向滚动

  父容器高度/宽度未继承是隐藏根源

  即使表格样式全对，若父 <div> 自身没明确宽度，<code>width: 100% 就失去参照——它的“100%”算出来可能是 0 或一个极小值，后续所有布局都失准。

  • 从根开始重置：html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
  • 包裹表格的 <div> 必须有明确尺寸，例如：<code>style="width: 100%; height: 400px;" 或用 flex：display: flex; flex-direction: column;
  • 在 React/Vue 中，组件默认不继承父尺寸，需显式传 style={{ width: '100%' }} 或用 class 绑定

  最常被跳过的其实是 <col> 的位置和 max-width: 0 在单元格上的组合——前者让 fixed 布局真正启动，后者让 break-word 生效。漏掉任意一个，width: 100% 都只是表面功夫。