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