transform:scale会让表格内容模糊或错位，因触发亚像素渲染导致文字发虚、边框断裂、border-collapse失效，且不改变文档流尺寸；应优先用viewport+媒体查询+overflow-x:auto实现真正响应式适配。
transform:scale 会让表格内容模糊或错位
直接对 <table> 元素用 transform: scale(0.8) 看似能“缩小适配”，但实际会触发浏览器的亚像素渲染，导致文字发虚、边框断裂、border-collapse: collapse 失效，且缩放后表格仍占据原始宽度（transform 不影响文档流），可能撑破容器或遮挡其他元素。
优先用 viewport + CSS 媒体查询替代 transform
小屏幕适配本质是响应式布局问题，不是视觉缩放问题。真正有效的做法是让表格本身“变小”或“可滚动”，而非强行压缩像素：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则transform在移动端可能被忽略或行为异常 - 给表格父容器加
overflow-x: auto，让横向滚动成为默认 fallback（尤其对列数多的表格） - 用媒体查询重设字体、内边距和最小列宽：
@media (max-width: 480px) { table { font-size: 14px; } th, td { padding: 4px 6px; } th:first-child, td:first-child { min-width: 80px; } }
如果必须用 transform，得包裹并重置 layout 影响
仅当所有列宽固定、且需整体等比压缩（如报表导出预览场景）时才考虑 transform，但必须配合以下措施：
- 把
<table>包在带overflow: hidden的容器里，防止缩放后溢出 - 用
transform-origin: top left避免缩放中心偏移导致位置飘移 - 手动设置容器 width/height，并用
transform: scale()后通过负 margin 或 flex 调整回视口内（例如：margin-left: calc((1 - 0.75) * 100%)） - 加
will-change: transform提升渲染层，缓解模糊（但不解决根本）
移动端真要“缩放看全表”，用 zoom 更可靠
zoom 是非标准但被所有主流移动端浏览器支持的属性，它缩放的是整个渲染盒（包括 layout 尺寸），不会出现 transform 的亚像素问题：
立即学习“前端免费学习笔记（深入）”；
- 只在需要用户双指缩放查看的场景用，比如后台数据预览页
- 写法简单：
table { zoom: 0.8; }，但注意它不被 Safari 桌面版支持 - 不能和
transform混用——两者同时存在时，zoom会被忽略 - 若用
zoom，务必测试 iOS 上是否触发页面整体缩放（某些旧版 WKWebView 有 bug）
真正难的不是怎么缩，而是判断该不该缩：表格结构是否支持响应式重构？能否用卡片列表替代？transform 是视觉障眼法，修 UI 不修数据结构，迟早要返工。
