transform: scale() 会让表格边框变粗或断裂，是因为亚像素渲染导致1px边框映射到非整数物理像素，引发抗锯齿模糊和border-collapse失效；解决方案包括强制gpu渲染、使用小数px边框、确保border-collapse生效、缩放容器而非表格本身，或改用zoom属性。

为什么 transform: scale() 会让表格边框变粗或断裂

直接对 <table> 应用 <code>transform: scale(0.8) 后，常见现象是部分边框看起来更粗、发虚，甚至出现断线——这不是 CSS 写错了，而是浏览器在亚像素渲染时对 border 的采样失真所致。尤其当缩放值不是整数（如 0.85、0.75）时，1px 边框被映射到非整数物理像素，导致抗锯齿模糊 + 边界重叠判断异常。border-collapse: collapse 在缩放后也常失效，原本合并的边框重新“分离”，视觉上变成双线。

缩放时保持边框清晰统一的实操方案

不依赖 transform 独立控制边框，而是让边框参与整体缩放并规避亚像素陷阱：

• 给 <table> 和所有 <code>th、td 同时加 transform: translateZ(0) 或 will-change: transform，强制 GPU 渲染层，减少模糊
• 避免只设 border: 1px solid #000，改用 border: 0.8px solid #000（现代 Chrome/Firefox 支持小数 px），使缩放后仍趋近整数渲染
• 禁用 border-spacing，确保 border-collapse: collapse 生效；若必须用 separate，则配合 border-spacing: 0
• 缩放容器（如包裹 <div>）而非表格本身，并设 <code>overflow: hidden 防止边框溢出裁剪不一致

  替代方案：用 zoom 替代 transform 缩放边框

  zoom 是少数能真正等比缩放 border 尺寸（含 layout 影响）的属性，它不会触发亚像素渲染问题，边框粗细比例保持一致：

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • 仅适用于需用户交互缩放的场景（如后台数据预览页），写法简单：table { zoom: 0.85; }
  • 注意 iOS Safari 桌面版不支持，但所有移动端 WebView（包括 iOS WKWebView）均支持
  • 不能和 transform 共存——一旦元素同时有两者，zoom 被忽略
  • 缩放后文档流尺寸同步变化，所以父容器无需额外处理 overflow-x，但要测试旧版 WKWebView 是否误触页面级缩放

  真正难的不是修边框，是判断要不要缩

  如果表格列数多、内容密，强行缩放边框只会让可读性恶化。此时应优先考虑结构响应式：用 @media 降字体、减 padding、设 min-width，再配 overflow-x: auto 容器。只有当表格结构固定、且明确用于报表导出/打印预览这类“视觉快照”场景时，transform 或 zoom 才是合理选择。边框是否清晰，本质取决于你有没有先想清楚：这个表格，到底是给人看的，还是给人扫的。