table-layout: fixed + <col> 是最稳解法；若需分离边框，用 outline 或伪元素绕过 sub-pixel 渲染缺陷，禁用 transform 缩放。
表格 width: 100% 为什么总差 1px
这不是 bug，是浏览器对 border-collapse: separate 下边框渲染的插值行为——当容器宽度不能被列数整除时，Chrome 会把剩余像素分摊到各列间隙或边框上，导致视觉错位。你看到的“1px 偏移”，本质是 CSS 像素在 sub-pixel 渲染中被四舍五入的结果。
- 只在
border-collapse: separate（默认）下出现；border-collapse: collapse可消除该偏差，但会合并边框 - 触发条件依赖窗口宽度：40% 容器宽若算出 327.6px，表格取整为 328px，而兄弟
div.info边框按 327px 渲染，就露出 1px 缝隙 - Firefox 和 IE 不做这种 sub-pixel 分摊，所以不显偏移
- 不要用
transform: translateX(-1px)硬拉——它会让文字模糊，且缩放后失效
用 table-layout: fixed 锁死列宽计算
table-layout: fixed 强制浏览器忽略单元格内容，按 col 或第一行 td 的 width 属性分配列宽，避免动态重排带来的 sub-pixel 漂移。
- 给
<table>加style="table-layout: fixed; width: 100%;" - 用
<col>显式声明每列宽度：<col width="20%"><col width="30%"><col width="50%"> - 避免在
td上写width百分比——它在fixed模式下会被忽略，应统一用<col> - 若需响应式，改用
min-width+max-width控制列极限，而非百分比
border-collapse: collapse 的副作用与规避
设 border-collapse: collapse 能根治 1px 偏移，但会吞掉 border-spacing 和单侧边框控制能力。如果设计必须保留外边框或独立列边框，可用以下折中方案：
- 保留
border-collapse: separate，但把所有border改为outline—— outline 不参与盒模型计算，不会触发 sub-pixel 分摊 - 用
box-shadow: inset 0 0 0 1px #999替代右侧边框，它不占布局空间，也不被分摊 - 给
td设padding: 0和margin: 0，再用伪元素::after绘制 1px 分隔线，完全绕开 border 渲染逻辑 - 若表格需打印，outline 和 box-shadow 默认不打印，此时必须回归
collapse模式
高 DPI 屏幕下的额外校准
在 125% 缩放笔记本上，即使修复了 1px 偏移，表格列宽仍可能因 devicePixelRatio 插值而轻微抖动。此时需同步校准根字体和容器尺寸：
立即学习“前端免费学习笔记（深入）”；
- 运行
document.documentElement.style.fontSize = 16 * window.devicePixelRatio + 'px'，让 rem 单位对齐物理像素 - 把表格外层容器的
width从40%改为calc(40% * (1 / window.devicePixelRatio))（需 JS 动态注入） - 禁用任何
transform: scale()全局缩放——它会让table-layout: fixed失效，列宽重新浮动 - 验证时务必在 Chrome 设置里手动调到 125%、150%，不能只靠系统 DPI 检测
真实场景里，table-layout: fixed + <col> 是最稳解法；但若设计强依赖分离边框，就得用 outline 或伪元素绕过渲染器缺陷。别信“加个 zoom: 0.999 就好”这种 hack——它只是把偏差藏起来，换分辨率或缩放档位立刻复现。
