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、字体加载状态一起看。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
