固定px宽度在缩放时必然变形，因浏览器缩放调整像素密度而px值仍按原始尺寸计算；flex: 0 0 250px比width: 250px更抗缩放，需搭配box-sizing: border-box；表格须用table-layout: fixed、width: 100%及colgroup明确列宽；缩放表格需加transform-origin、overflow-x: auto和translateZ(0)防偏移、裁剪与模糊。
为什么固定 px 宽度在缩放时必然变形
浏览器缩放不是“放大图片”，而是按比例调整渲染像素密度，但你的 width: 250px、margin-left: 20px 这类绝对值仍按原始像素计算位置和尺寸。结果就是：缩放到 125% 时，左栏视觉变宽，右栏被挤出视口；缩到 80% 时，间隙塌缩、文字重叠、边框错位。
关键不在“缩放本身”，而在你把布局锚点钉死在像素上。只要存在未包裹的 px 值（尤其在宽度、间距、定位偏移中），就注定失稳。
flex: 0 0 250px 比 width: 250px 更抗缩放width: 250px 在 flex 容器里是脆弱的——它默认允许收缩（flex-shrink: 1），一旦父容器变窄或缩放比例变化，左栏可能被压缩，尤其当它带 padding 或 border 且没设 box-sizing: border-box 时，实际宽度远超 250px。
改用 flex: 0 0 250px 才真正锁定：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 明确禁用伸展（
flex-grow: 0）和收缩（flex-shrink: 0） -
flex-basis: 250px作为基础尺寸，不受缩放干扰 - 必须搭配
box-sizing: border-box，否则 padding/border 会额外撑宽
右栏直接用 flex: 1，别写 width: calc(100% - 270px)——calc 容易漏算 margin/border，且缩放后百分比基准仍按原始视口算，不可靠。
表格嵌在双栏里时，列宽会自己乱跑
如果你在右栏放了 <table>，又给 <code><td> 写了 <code>width="50%"，大概率失效。原因有三：
- 默认
table-layout: auto，浏览器优先按内容撑开列宽，百分比只是建议
- 没设
table-layout: fixed + width: 100%，百分比无计算基准
-
<col> 标签没放在 <table> 后、<code><thead> 前，整组声明静默忽略<p>可靠写法只有一套组合：</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><pre class='brush:php;toolbar:false;'><table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 20%">
<col style="width: 80%">
</colgroup>
<tr><td>Label</td><td>Input</td></tr>
</table></pre><h3>缩放后表格溢出、字体发虚、滚动条不出现
对双栏中的表格单独加 <code>transform: scale(0.85) 是常见操作，但漏掉这三点就会翻车：
- 不加
transform-origin: top left → 表格缩放后整体左上偏移，可能直接消失一半
- 不包外层容器并设
overflow-x: auto → 缩放不改变文档流占位宽度，右侧内容被裁，且无滚动条
- 不加
translateZ(0) → Windows Chrome / 微信 WebView 中文字模糊，边框锯齿
table-layout: auto，浏览器优先按内容撑开列宽，百分比只是建议table-layout: fixed + width: 100%，百分比无计算基准<col> 标签没放在 <table> 后、<code><thead> 前，整组声明静默忽略<p>可靠写法只有一套组合：</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><pre class='brush:php;toolbar:false;'><table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 20%">
<col style="width: 80%">
</colgroup>
<tr><td>Label</td><td>Input</td></tr>
</table></pre><h3>缩放后表格溢出、字体发虚、滚动条不出现
对双栏中的表格单独加 <code>transform: scale(0.85) 是常见操作，但漏掉这三点就会翻车：
- 不加
transform-origin: top left→ 表格缩放后整体左上偏移，可能直接消失一半 - 不包外层容器并设
overflow-x: auto→ 缩放不改变文档流占位宽度，右侧内容被裁，且无滚动条 - 不加
translateZ(0)→ Windows Chrome / 微信 WebView 中文字模糊，边框锯齿
正确结构是：
<div class="table-container" style="overflow-x: auto; padding-bottom: 20px;">
<table id="summary-table" style="transform: scale(0.85) translateZ(0); transform-origin: top left; width: fit-content;">
...
</table>
</div>缩放值别硬写死，用 @media (max-width: 768px) { #summary-table { transform: scale(0.75); } } 更稳妥。低于 0.7 字体难辨，高于 0.95 小屏仍需滚动，意义不大。
