必须配 transform-origin: top left 防偏移，用 width: fit-content + overflow-x: auto 解决溢出，加 translatez(0) 避免字体模糊。

直接用 transform: scale() 缩放表格，但必须配 transform-origin

单独加 transform: scale(0.8) 很可能让表格左上角“飞”出视口，因为默认缩放中心是元素正中心。实际缩放后，表格整体向上向左偏移，尤其在窄容器里容易直接消失一半。

必须显式设原点：transform-origin: top left，确保缩放从左上角开始，位置可控、不跳变。若表格有 margin: auto 居中，缩放后仍会居中；但若靠左浮动或默认文档流，top left 能让它“钉住”左上角不动。

• scale(0.85) 是较安全的起始值（85%），兼顾可读性与紧凑性
• 避免用 scale(0.5) 以下——小字号+细边框在多数屏上已难辨认
• 别对 <table> 直接设 <code>scale 后再套 width: 100%，这会导致缩放和拉伸混用，列宽计算错乱

  缩放后横向溢出？关键要锁 width: fit-content + overflow-x: auto

  transform: scale() 不改变元素在文档流中占位大小，缩放后的表格视觉变小了，但浏览器仍按原始宽度分配空间，结果就是：内容被“压扁”，右侧被截断，或者意外触发横向滚动条（且滚动不了）。

  解决办法分两步走：

  • 给表格本身加 width: fit-content，让它只占真实内容所需宽度，不撑满父容器
  • 给外层容器（比如 <div class="container">）加 <code>overflow-x: auto 和 padding-bottom: 20px，前者允许水平滚动，后者防缩放后底部被滚动条遮住
  • 如果容器是 display: flex 或 inline-block，fit-content 兼容性更好；IE 不支持可退到 display: inline-table

  缩放后字体发虚？加 translateZ(0) 触发 GPU 加速

  尤其在 Windows Chrome 或旧版 Edge 上，scale() 缩放文字常出现模糊、锯齿，本质是浏览器用了 CPU 渲染而非 GPU。这不是 bug，是默认渲染策略。

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载

  只需给缩放目标及其子元素统一加硬件加速标记：

  • #summary-table { transform: scale(0.85) translateZ(0); }
  • #summary-table th, #summary-table td { transform: translateZ(0); }
  • 注意：不要只加在 <table> 上，<code><th>/<code><td> 也得加，否则单元格内文字仍可能糊<li>移动端 WebView（如微信内嵌页）对此更敏感，加了基本就清晰了</li> <h3>响应式场景下，<code>@media 里改 scale 值比 JS 更稳

    有人用 JS 监听 window.resize 动态算缩放比例，但容易抖动、不同步、首次渲染白屏。其实 CSS 媒体查询就能干净解决。

    例如小屏设备（max-width: 768px）自动切更小比例：

    /* 移动端进一步缩小 */
    @media (max-width: 768px) {
      #summary-table {
        transform: scale(0.75) translateZ(0);
      }
    }

    注意两点：

    • 别在媒体查询里重复写 transform-origin，它继承父级，写一次就够了
    • 如果用了 scale(0.75) 还看不清，优先调大字体或简化列数，而不是继续往下压到 0.6——那是放弃可访问性

    缩放本身很简单，真正卡住人的永远是缩放后的位置偏移、溢出不可滚动、字体模糊这三件事。把 transform-origin、width: fit-content 和 translateZ(0) 这三个点对齐，剩下的只是调数值。