必须配 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>直接设scale后再套width: 100%，这会导致缩放和拉伸混用，列宽计算错乱
缩放后横向溢出？关键要锁 width: fit-content + overflow-x: auto
transform: scale() 不改变元素在文档流中占位大小，缩放后的表格视觉变小了，但浏览器仍按原始宽度分配空间，结果就是：内容被“压扁”，右侧被截断，或者意外触发横向滚动条（且滚动不了）。
解决办法分两步走：
立即学习“前端免费学习笔记（深入）”；
- 给表格本身加
width: fit-content，让它只占真实内容所需宽度，不撑满父容器 - 给外层容器（比如
<div class="container">）加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，是默认渲染策略。
只需给缩放目标及其子元素统一加硬件加速标记：
#summary-table { transform: scale(0.85) translateZ(0); }#summary-table th, #summary-table td { transform: translateZ(0); }- 注意：不要只加在
<table>上，<th>/<td>也得加，否则单元格内文字仍可能糊 - 移动端 WebView（如微信内嵌页）对此更敏感，加了基本就清晰了
响应式场景下，@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) 这三个点对齐，剩下的只是调数值。
