HTML表格文字行高如何设置：LINE-HEIGHT控制阅读节奏

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、字体加载状态一起看。