表格缩放模糊需用容器层加 translateZ(0) 或 will-change: transform 触发 GPU 加速，配合 overflow: hidden 容器和 transform-origin: center；移动端须用 JS 或 focus-within 替代 hover。
transform:scale 放大表格时内容模糊怎么办
直接对 <table> 或 <tbody> 应用 transform: scale(1.2) 后，文字和边框常出现毛边、发虚——这不是 bug，而是浏览器对非整数像素缩放的渲染限制。关键在于触发硬件加速并强制高分屏渲染。
实操建议：
- 给表格容器（如
<div class="table-wrapper">）加transform: translateZ(0)或will-change: transform，激活 GPU 渲染 - 避免只缩放
<table>，改用包裹层缩放，防止border-collapse: collapse在缩放时错位 - 配合
transform-origin: center保证居中放大，否则可能偏移出视口
鼠标悬停放大但不撑开周围布局
表格本身有文档流高度，transform 虽不占空间，但父容器若未设 overflow: hidden，放大后会溢出并推挤相邻元素。
必须套一层固定尺寸容器：
立即学习“前端免费学习笔记（深入）”；
<div class="table-container" style="width: 100%; height: 300px; overflow: hidden;"> <table class="hover-scale">...</table> </div>
再对 .hover-scale 设置悬停样式：
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.15);
}
注意：不要用 zoom 替代 transform，它已被废弃且不支持平滑过渡
不同浏览器下 scale 行为不一致
Firefox 对 transform: scale() 的子元素 border 渲染更“硬”，而 Chrome/Safari 可能让细边线在缩放后变成 1.3px 导致模糊；Edge（旧版）甚至可能忽略 transform-origin。
兼容性处理要点：
- 统一用
border: 1px solid #ddd，避免0.5px或thin - 对需要精确对齐的列宽，改用
table-layout: fixed+ 显式width，防止缩放后列宽重计算抖动 - IE11 不支持
transform缩放表格（仅支持块级元素），如需兼容，得降级为 JS 动态修改font-size和padding
移动端 touch 设备上 hover 失效
纯 CSS :hover 在 iOS Safari 和 Android Chrome 上，首次点击才触发，且不会自动恢复——用户点一次放大，再点别处也不会缩小。
真实可用方案只有两个：
- 放弃纯 CSS，用 JS 监听
touchstart和touchend切换 class（注意防连续触发） - 改用
:focus-within配合可聚焦的<table tabindex="0">，但需提醒用户按 Tab 键操作，体验割裂
没有“既纯 CSS 又适配 touch”的通用解法，这点容易被忽略——写完桌面端效果，一测 iPad 就露馅。
