直接缩放字体不能解决表格自适应问题，因为文字“看起来小”实为列宽被长内容撑开导致行高拉高、或小屏下强制缩放引发模糊；浏览器按CSS计算布局，表格默认优先保行列对齐而非文字大小。
为什么直接缩放字体不能解决表格自适应问题
表格里文字“看起来小”不是字体大小的问题，而是列宽被长内容撑开、导致行高被迫拉高、视觉上文字被稀释；或者小屏下强行缩放 font-size 会让数字/单位模糊、可读性反而下降。浏览器不会因为屏幕变小就自动调小表格内文字——它只按 CSS 计算布局，而表格的默认行为是优先保行列对齐，不是保文字大小。
用 viewport + rem + media query 控制基础字号
真正可控的方式是把表格文字大小和视口宽度挂钩，而不是固定像素值：
- 在
<head>中设置<meta name="viewport" content="width=device-width, initial-scale=1">，这是所有响应式的基础 - 根元素
html使用font-size: clamp(14px, 2.5vw, 16px);，让基础字号随屏幕线性变化（clamp()在 IE 不支持，需 fallback） - 表格内文字统一用
rem单位：td, th { font-size: 0.95rem; }，避免嵌套层级干扰 - 慎用
transform: scale()缩放整个<table>：会导致点击区域错位、文字锯齿、打印异常
表格结构本身比字体更影响“自适应感”
用户觉得“文字太小”，往往是因为列太窄挤在一起，或行太高显得空——这时调大字体只会加剧溢出或换行错乱。关键要先稳住布局：
- 小屏下优先用
table-layout: fixed+width: 100%，防止某列被 UUID 或 URL 撑爆 - 给
td, th加word-break: break-word; white-space: normal;，让长文本主动换行，释放横向空间 - 避免给
td设height或line-height固定值，否则内容一多就文字被截或行高失真 - 图片必须设
max-width: 100%; height: auto;，否则会顶高整行，让文字“看起来更小”
移动端真要改字号？只针对特定字段微调
全局缩放不现实，但某些字段确实需要视觉强化——比如状态标签、金额、操作按钮文字：
立即学习“前端免费学习笔记（深入）”；
- 用类名区分语义：
<td class="status-cell">已发货</td> - 媒体查询中单独放大：
@media (max-width: 480px) { .status-cell { font-size: 1.1rem; font-weight: 600; } } - 金额列加
white-space: nowrap;防止 “¥12,345.67” 被断成两行，再配合font-size微调 - 绝对不要用 JavaScript 动态计算并设置
style.fontSize——重排重绘代价高，且无法响应横竖屏切换
表格的“自适应文本大小”，本质是让文字在可用空间里保持可读，而不是无差别缩小。最常被忽略的是：先管住列宽和换行，字号才有意义。
