line-height在表格中不等于行高，仅控制单元格内文本的行框高度；实际单元格高度由内容盒、padding和border共同决定；稳定控高应优先使用tr的height、td的padding或min-height配合vertical-align。
line-height在上不等于行高
它只影响单元格内文本的行框（line box）高度，不是
或
的盒高。哪怕你给td设了line-height: 40px，只要里面有一张img、一段换行文字，或者加了padding，最终单元格高度就由内容盒 + padding + border共同决定，line-height只管那一行文字怎么“站”。
常见错误现象：tr加line-height完全无效；td设了line-height但高度还是忽高忽低——本质是误把文本行距当成了容器尺寸。
真正稳定控高的三类做法
要让表格行看起来“整齐划一”，得绕开line-height单独扛大梁的幻想：
- 给
tr设height：最直接，Chrome/Firefox 都支持，但内容超限时会溢出或裁剪
- 给
td设padding：比如padding: 12px 8px，兼容性好、无冲突、易调试，推荐作为默认手段
- 给
td设min-height + vertical-align: middle：适合需要内容垂直居中的场景，注意旧版 IE 对min-height在 table-cell 中支持弱
别混用height和line-height去“锁死”单元格——字体变大时，line-height撑开，height卡死，结果就是文字被截或悬空。
line-height在表格里还能怎么用
它不是没用，而是用途很具体：
- 单行纯文本垂直居中：设
line-height等于你期望的视觉高度（如40px），再配vertical-align: middle，保险起见两者都写
- 多行文本可读性优化：比如
td { line-height: 1.4; font-size: 14px; }，避免行间粘连
- 防文字贴顶/贴底：默认
line-height: normal（约1.2）常让文字偏上，设成1.3～1.5更稳
- 慎用
em或px：混合字号表格里，line-height: 20px会导致小字号单元格留白过大，大字号则挤压；无单位数字（如1.5）才是响应式首选
为什么border-collapse: collapse必须加
默认border-collapse: separate下，cellspacing（已废弃）和边框叠加会让高度不可预测。比如两个1px边框+默认间距，实际单元格高度可能比你设的line-height高出好几像素。
border-collapse: collapse一加，边框合并、间距归零，padding和line-height才真正可控。动态渲染（React/Vue）中高度跳变，八成是因为没加这句，或者图片没占位、字体还没加载完。
它只影响单元格内文本的行框（line box）高度，不是
td设了line-height: 40px，只要里面有一张img、一段换行文字，或者加了padding，最终单元格高度就由内容盒 + padding + border共同决定，line-height只管那一行文字怎么“站”。
常见错误现象：tr加line-height完全无效；td设了line-height但高度还是忽高忽低——本质是误把文本行距当成了容器尺寸。
真正稳定控高的三类做法
要让表格行看起来“整齐划一”，得绕开line-height单独扛大梁的幻想：
- 给
tr设height：最直接，Chrome/Firefox 都支持，但内容超限时会溢出或裁剪 - 给
td设padding：比如padding: 12px 8px，兼容性好、无冲突、易调试，推荐作为默认手段 - 给
td设min-height+vertical-align: middle：适合需要内容垂直居中的场景，注意旧版 IE 对min-height在 table-cell 中支持弱
别混用height和line-height去“锁死”单元格——字体变大时，line-height撑开，height卡死，结果就是文字被截或悬空。
line-height在表格里还能怎么用
它不是没用，而是用途很具体：
- 单行纯文本垂直居中：设
line-height等于你期望的视觉高度（如40px），再配vertical-align: middle，保险起见两者都写 - 多行文本可读性优化：比如
td { line-height: 1.4; font-size: 14px; }，避免行间粘连 - 防文字贴顶/贴底：默认
line-height: normal（约1.2）常让文字偏上，设成1.3～1.5更稳 - 慎用
em或px：混合字号表格里，line-height: 20px会导致小字号单元格留白过大，大字号则挤压；无单位数字（如1.5）才是响应式首选
为什么border-collapse: collapse必须加
默认border-collapse: separate下，cellspacing（已废弃）和边框叠加会让高度不可预测。比如两个1px边框+默认间距，实际单元格高度可能比你设的line-height高出好几像素。
border-collapse: collapse一加，边框合并、间距归零，padding和line-height才真正可控。动态渲染（React/Vue）中高度跳变，八成是因为没加这句，或者图片没占位、字体还没加载完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
