table-layout: auto 仅控制列宽计算逻辑，不影响字号；字号由 font-size 决定，需配合 word-break 和 max-width 解决溢出问题，JS 动态调字号需谨慎并设最小限制。
table-layout: auto 不能自动缩放字号，只能影响列宽
很多人误以为 table-layout: auto 能让字体随内容长短“智能变大变小”，其实它只控制列宽计算逻辑：逐列扫描所有单元格里最长的不可换行字符串（比如一长串无空格 URL），以此定列最小宽度。字号完全不受影响，浏览器不会主动缩放文字。
真正决定字号的是你写的 font-size 值——它要么固定（如 14px），要么相对（如 0.875rem），但绝不会因为“这列内容短”就自动变小，“那列内容长”就自动放大。
- 想靠 CSS 自动切换字号？目前没有原生属性支持，
font-size不接受内容长度作为输入变量 - 如果某列文字挤成一团看不清，问题不在字号大小，而在换行没生效（比如漏了
word-break: break-all） - 强行用 JS 监听单元格文本长度再改
style.fontSize，不仅性能差、触发时机难控，还会破坏可访问性（屏幕阅读器、缩放等）
字号该设在哪一级？优先写在 table 或 td 上
表格内字号继承链很直接：table → tr → td/th。但 tr 元素本身不渲染文本，设 font-size 在它上面基本无效；真正起作用的是 table 或具体单元格元素。
- 统一控制：写
table { font-size: 0.875rem; }，所有单元格继承，维护成本最低 - 差异化控制：表头用大号，数据用小号，就分别写
th { font-size: 1.125rem; }和td { font-size: 0.875rem; } - 避免在
tr上设font-size—— 它不参与字体渲染，纯属冗余声明 - 别用内联
style="font-size: ..."批量写在每个td里，后期改字号要手动点开几十个标签
内容太长导致溢出？不是字号问题，是换行没配对
常见现象：一列塞了个 50 字符的 UUID，整列被撑开，相邻列被压缩到看不见，用户第一反应是“把字号调小”，其实根源在换行策略缺失。
立即学习“前端免费学习笔记（深入）”；
- 先确认是否加了
word-break: break-all或word-wrap: break-word到td上 - 必须配合
max-width（比如max-width: 200px），否则break-all也没法生效——浏览器不知道“该在哪停” -
white-space: normal是默认值，但如果之前被设成nowrap，得显式重置回来 - 别给
th/td直接设width，尤其在table-layout: auto下，它会被忽略或引发冲突
真要动态调字号？JS 方案必须带 fallback 和边界控制
如果业务强需求“短文本大字、长文本小字”，JS 是唯一路径，但必须规避常见翻车点：
- 不能只读
textContent.length—— 中文 10 字和英文 10 字视觉宽度差 2 倍，应测offsetWidth或用getBoundingClientRect() - 必须加最小字号限制（如不低于
12px），否则 100 字内容可能缩到肉眼难辨 - 监听时机选
DOMContentLoaded即可，不用resize或input——表格内容通常静态，动态更新时再单独触发 - 务必提供手动覆盖 class（如
td.fixed-font），让关键字段（如 ID、状态标签）保持固定字号，不受自动逻辑干扰
这种逻辑容易让字体大小在不同行之间跳变，破坏阅读节奏；多数场景下，用 max-width + word-break 配合合理默认字号，比动态缩放更稳、更可测。
