弹窗/抽屉中表格易撑破容器，因默认 table-layout: auto 与受限空间冲突；需同时设 width: 100% 和 table-layout: fixed，并用 定义列宽，配合 overflow-x: auto 或响应式卡片布局保障可读性。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

直接在弹窗或抽屉里放 <table>，90% 的情况会撑破容器、横向溢出、文字挤成一团——不是你 CSS 写得少，而是表格默认行为和弹窗/抽屉的受限空间天然冲突。 <h3>为什么弹窗/抽屉里的表格总“不听话”</h3> <p>弹窗（如 <code>div[role="dialog"]）和抽屉（如 ax-drawer）通常有明确宽高限制（比如 width: 400px 或 max-width: 70%），而 HTML 表格默认用 table-layout: auto，会等所有内容加载完再算列宽。一旦某列含长 URL、无空格英文或图片，整行就被拉宽，直接突破父容器边界。

• 抽屉默认尺寸是 small（400px）或 middle（600px），远小于后台列表常见最小宽度（1200px+）
• 弹窗常设 max-width: 500px，但没配 overflow-x: auto，导致横向滚动条不出现
• width: 100% 在 flex 容器（如很多抽屉内部用 display: flex）中可能失效，浏览器忽略百分比
• 用 <th width="20%"> 这类写法，在 <code>auto 模式下会被内容覆盖，根本不起作用

  必须加的三行 CSS 才能进弹窗/抽屉

  不是加一堆 hack，而是锁定渲染逻辑：让表格先按你定的列宽画框，再往里填内容。核心就是启用 table-layout: fixed 并确保它生效。

  • table 必须同时设 width: 100% 和 table-layout: fixed —— 少一个都不行
  • 父容器（弹窗内容区或抽屉主体）要有明确宽度，比如 .ax-drawer-content { width: 100%; } 或弹窗 body 加 max-width: 100vw
  • 列宽必须用 <col> 定义，且 <col> 必须紧贴 <table> 开始标签后、<code><thead> 前，例如：<pre class="brush:php;toolbar:false;">&lt;table style=&quot;width: 100%; table-layout: fixed;&quot;&gt; &lt;col width=&quot;80&quot;&gt; &lt;col width=&quot;30%&quot;&gt; &lt;col width=&quot;20%&quot;&gt; &lt;thead&gt;&lt;tr&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;名称&lt;/th&gt;&lt;th&gt;状态&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt; &lt;/table&gt;</pre> <h3>小屏下别硬撑，该滚动就滚动，该堆叠就堆叠</h3> <p>在 400px 宽的抽屉里强行把 6 列表格压成一行，只会让文字缩到看不清。优先保可读性，而不是“看起来像表格”。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>列数 ≥ 4 或字段语义强（如“订单号”“创建时间”“操作人”），用媒体查询转卡片布局：<code>@media (max-width: 480px) { table, thead, tbody, th, td, tr { display: block; } td { position: relative; padding-left: 100px; } td::before { content: attr(data-label); position: absolute; left: 0; font-weight: bold; }
  • 报表类表格（不可删列），外层容器加 overflow-x: auto 和 -webkit-overflow-scrolling: touch，<table> 设 <code>min-width: fit-content 或具体值（如 min-width: 1000px）
  • 禁用 white-space: nowrap 在 <td> 上——它会让长文本直接撑破容器，改用 <code>word-break: break-word 或 overflow-wrap: break-word
  • 图片必须加 img { max-width: 100%; height: auto; }，否则无视列宽基准

  容易被忽略的兼容性细节

  最麻烦的不是写不出效果，而是某些环境根本不认你写的规则。

  • Outlook（用 Word 渲染引擎）完全不支持 table-layout: fixed，邮件类弹窗慎用表格响应式方案
  • <col> 不支持 fr 单位，混用 % 和 px 在部分老浏览器中会导致后续列宽度计算异常
  • 抽屉框架（如 ax-drawer）内部可能用 transform 或 flex 布局，width: 100% 在子元素上可能被重置，建议直接给 <table> 加 <code>!important（仅限调试阶段验证）
  • 弹窗若用 position: fixed + inset: 0，要确认其 z-index 是否被抽屉遮盖——两者层级冲突时，表格可能被裁切