先说结论：line-height 在表格里并非随意设置就能生效。它仅在 td 或 th 元素上才能真正控制行高，写在 tr 或 table 上，浏览器基本无视。必须搭配 vertical-align: middle、border-collapse: collapse，同时还要注意避免与 height 产生冲突。如果单元格内包含图片或多行文本，推荐直接使用 flex 布局，更省心。
表格里设置 line-height 为什么不管用
这其实不是你的问题。表格的渲染机制与普通块级元素不同：line-height 属性在 td 或 th 上才会参与行框计算，放在 tr 或 table 上，基本等于无效。Chrome、Firefox 都不认 tr 上的 height 或 line-height，它只作用于“行框”，而表格单元格才是形成行框的最小容器。
常见的翻车场景：给 tr 加了 line-height: 40px，看起来没问题，但实际效果是文字依然贴顶、挤在一起，甚至被截断——因为浏览器根本没把它当作行高来解析。
- 必须把
line-height写在td或th上，不要指望父级继承 - 如果使用了
border-collapse: separate（默认值），cellspacing和边框叠加会导致实际高度飘忽不定，建议加上border-collapse: collapse vertical-align必须配合使用。默认值为baseline，单行文字会偏下，建议统一设为middle
td 里同时设置 line-height 和 height 的坑
很多人想“锁死”单元格高度，给 td 同时加上 height: 40px 和 line-height: 40px，结果发现：小字号时文字悬空，大字号时文字溢出或重叠。
深层原因在于：height 控制盒模型高度，line-height 控制行框高度，两者不会自动对齐；当字体放大，line-height 按比例撑开，但 height 被固定，冲突就出现了。
- 纯文本单行场景，优先只使用
line-height+vertical-align: middle，去掉height - 若确实需要固定单元格高度（如后台列表），用
min-height替代height，再配合box-sizing: border-box和padding控制内边距 - 包含图片或多行文本时，
height几乎必然失效，改用max-height+overflow: hidden，或者直接采用display: flex重构单元格布局
中文表格正文该用多少 line-height
中文字符字怀大、笔画密，比英文更需要呼吸感。表格虽不是文章段落，但也不能为了节省空间压到 1.2——小字号（如 12px）下 line-height: 1.4 就可能粘连，尤其在思源黑体、HarmonyOS Sans 这类现代字体中更为明显。
- 常规数据表格（
font-size: 14px）起步建议line-height: 1.6，实测可读性平衡点 - 后台管理类表格（
font-size: 12px）至少line-height: 1.5，否则横向扫视时容易串行 - 标题行（
th）可用line-height: 1.3，但不要低于1.25，否则基线对齐会让文字顶着上边框 - 打开开发者工具，给
td加上border: 1px solid red，观察真实行框是否完整包裹文字，不要只看设置值
动态渲染表格时行高跳变怎么办
React/Vue 渲染后，表格行高突然变矮或文字重叠，大概率不是 line-height 没生效，而是字体加载延迟或图片未占位导致初始渲染使用了 fallback 字体（例如系统默认的等宽字体），它的 line-height 计算基准与最终字体不一致。
- 给
body或表格容器添加font-display: swap，避免空白期拉伸错乱 - 所有表格列宽、行高相关样式，避免依赖未加载字体的
em或rem计算，优先使用无单位数值 - 图片区域预留
min-height或用aspect-ratio固定容器比例，防止内容注入后高度塌陷 - 不要在
td上使用font-size: 0清除间隙——它会导致无单位line-height计算为 0，子元素必须显式设置font-size
归根结底，line-height 在表格中不是调不调得动的问题，而是它只在特定位置、配合特定规则才真正参与布局节奏。最容易被忽略的是：它从不单独决定单元格高度，永远要和 vertical-align、box-sizing、字体加载状态一起考量。
