缩放时表格乱序本质是浏览器对table-layout:fixed解析精度下降及px舍入误差累积所致；应改用百分比列宽（总和留1%冗余）、配对设置white-space/overflow/text-overflow、避免border-collapse:collapse高缩放虚线，必要时用outline替代边框。
缩放时表格乱序，本质不是“样式失效”，而是浏览器在不同缩放层级下对 table-layout: fixed 的解析精度下降、或对 px 宽度的舍入行为变化导致列宽微偏移，叠加 border-collapse: collapse 的边框合并逻辑，最终引发列错位、文字换行异常甚至整行偏移。
table-layout: fixed + 百分比列宽在缩放下更稳
用固定像素（如 width: 120px）定义列宽时，缩放 125% 或 150% 后，浏览器可能把 120px 渲染为 150.0000001px 或 149.999999px，再除以总宽算百分比，误差累积后某列突然窄了 1px，内容就挤换行。改用百分比可规避该问题：
-
<col style="width: 20%">比<th style="width: 120px"> 更抗缩放抖动 <li>所有 <code><col>宽度加起来必须 ≈ 100%，留 1% 冗余防四舍五入溢出（如 25% × 4 列 → 改成 24.75% × 4 = 99%） - 避免混用
fr和百分比：grid中的1fr在 table 里不生效，<col style="width: 1fr">是无效写法 - 给可能超长的
<td> 同时设：<code>white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 必须设
max-width（如max-width: 200px），否则nowrap在缩放后仍可能突破容器 - 别依赖
word-break: break-all—— 它会在任意位置断词，缩放后断点漂移，语义混乱 - 临时方案：加
transform: translateZ(0)强制 GPU 渲染，缓解 sub-pixel 抖动 - 长期方案：改用
border-collapse: separate+ 统一border-spacing: 0，再用outline模拟合并边框（outline不参与盒模型计算，缩放稳定性更高） - 注意：Outlook 邮件客户端完全忽略
outline，若需兼容邮件，只能接受 collapse 的缩放瑕疵
white-space 和 text-overflow 要配对设
缩放变大时，原本被 text-overflow: ellipsis 截断的文本可能因字体渲染尺寸微变而“刚好多显示一个字”，撑开单元格；缩放变小时又可能过早截断。关键不是调 font-size，而是锁住行为：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
border-collapse: collapse 在高缩放下易出虚线
缩放 175% 以上时，border-collapse: collapse 可能因 sub-pixel 渲染让相邻边框无法完全对齐，出现 1px 宽的“白缝”或双线重叠，视觉上像列错位。这不是 bug，是浮点舍入的必然结果：
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是缩放本身，而是缩放 + 滚动 + 表头固定三者叠加时，position: sticky 的 top 值和 transform 层级在不同缩放因子下产生微小偏移，导致表头“悬停抖动”。这种问题没法靠 CSS 单独解决，得结合 resize observer 监听缩放变化后重置 sticky 锚点——但多数场景下，用户缩放表格只是临时查看，没必要为它加 JS 介入。
