最干净的表格缩放方式是用 transform: scale() 配合 transform-origin: top left，再加 width: fit-content 防横向滚动，必要时用 translateZ(0) 触发 GPU 加速，并通过媒体查询适配小屏。
直接用 transform: scale() 缩放表格，但必须配 transform-origin
缩放表格最干净的方式就是对整个 <table> 元素应用 transform: scale()，它不改盒模型、不触发布局重排，文字/边框/背景全等比变化。但默认以元素中心为原点，表格一缩就往左上偏移——必须显式设 transform-origin: top left，否则表头和内容会错位。
常见错误：只写 scale(0.8) 不设原点，结果表格“飘”到视口外；或者写了 scale(0.8) 却没处理容器溢出，导致右边被截断。
-
scale()的值小于 1 是缩小（如0.75），大于 1 是放大（如1.2） - 推荐作用于具体 ID（如
#summary-table），避免误缩其他表格 - 别在
<body>或<html>上用，否则页面所有元素都跟着变，导航栏、按钮全变形
width: fit-content 是防止缩放后横向滚动异常的关键
transform: scale() 只改变渲染效果，不改变元素在文档流中占的宽度。缩放后的表格仍按原始宽度撑满父容器，容易触发横向滚动条或内容挤压——这时加 width: fit-content 让表格宽度“收拢”到内容实际所需尺寸，再配合 margin: 0 auto 居中，就能稳住布局。
如果父容器是 .container，记得同时设 overflow-x: auto，否则缩放后超出部分直接被裁掉，用户根本拉不到右边列。
立即学习“前端免费学习笔记（深入）”；
- 不用
width: 100%，那会让缩放失效或拉伸变形 - 不用
max-width，它只限制上限，不管缩放后实际尺寸 -
fit-content在现代浏览器（Chrome/Firefox/Safari ≥ 2022）完全可用，IE 不支持但你大概率不用兼容它
缩放后字体模糊？加 translateZ(0) 触发 GPU 加速
尤其在 Windows 的 Chrome 或 Edge 上，单纯 scale() 容易让文字边缘发虚。这不是 bug，是浏览器软件渲染的精度问题。加 transform: translateZ(0)（或 -webkit-transform: translateZ(0)）能强制启用硬件加速，让缩放更锐利。
这个属性要加在表格本身和所有单元格（<th>、<td>）上，只加在 <table> 标签上不够——子元素没加速，照样糊。
- 不要写成
transform: scale(0.8) translateZ(0)，顺序无所谓，但必须共存 - 别用
backface-visibility: hidden替代，它对表格单元格效果不稳定 - 移动端 Safari 有时需要额外加
-webkit-backface-visibility: hidden才彻底清晰
小屏幕要单独调缩放比例，靠媒体查询不是可选而是必须
桌面端设 scale(0.85) 刚好，放到手机上可能字小得看不清。不能指望用户自己双指放大——很多 WebView 或微信内置浏览器禁了手势缩放。必须用媒体查询主动适配：
@media (max-width: 768px) { #summary-table { transform: scale(0.7); } }
注意：这里不是“进一步缩小”，而是“换一个更适合小屏的比例”。0.7 是起点，实际要看你的列数和字体大小，测试时用真机看第一行数据是否能不侧滑阅读。
- 别用
initial-scalemeta 标签替代，它影响整个页面，会把按钮、导航也放大变形 - 别只靠 JS 动态监听
window.innerWidth改style.transform，响应式切换有延迟，且 SSR 场景下首屏错乱 - 缩放比例建议控制在 0.6–0.95 之间，低于 0.6 字太小，高于 0.95 在小屏上又容易横向滚动
真正麻烦的不是怎么写这三行 CSS，而是缩放后鼠标 hover 热区没变——视觉上表格小了，但点击区域还是原来那么大。如果用了高亮行或单元格交互，得同步调整事件绑定逻辑，否则用户点“空处”也能触发。这点很容易被忽略，直到 QA 提 bug 才发现。
