table td和th上直接设line-height有效，但需避开内联元素干扰；应优先设在td/th上，用无单位数值（如1.6）确保响应式缩放时行高动态适配，配合height实现单行垂直居中，多行则需padding或flex布局。
table td 和 th 上直接设 line-height 有效，但需避开单元格内联元素干扰
表格单元格（td、th）是块级容器，默认可接受 line-height，但常见失效是因为内部套了 span、a 或其他行内元素，而这些元素本身不“撑开”行高——line-height 控制的是整行的行框（line box），不是单个内联元素的高度。
实操建议：
- 优先把
line-height设在td、th上，而不是嵌套的span或a - 若单元格里只有纯文本或简单内联标签，
line-height: 1.6就能正常生效 - 若用了
vertical-align: middle或padding，注意它们和line-height共同影响最终视觉垂直居中效果——line-height不负责“对齐”，只负责“行高” - 避免在
table或tr上设line-height：它不会向下传递到单元格，且可能被浏览器忽略
line-height 值选无单位数字（如 1.5）还是像素（如 20px）？
表格文字常随响应式缩放或用户字体偏好变化，用固定像素值（line-height: 20px）极易出问题：小字号时行距松垮，大字号时文字重叠，尤其在辅助技术或系统强制缩放下完全失控。
无单位数值（line-height: 1.5）才是稳妥选择：
立即学习“前端免费学习笔记（深入）”；
- 它始终按当前单元格的
font-size动态计算，比如font-size: 14px→ 实际行高 = 21px；换成font-size: 18px→ 自动变成 27px - 子单元格继承的是“倍率”，不是绝对值，所以嵌套
small或strong标签时，内部文字仍保持合理行距 - 中文表格推荐起步值
line-height: 1.6，若列宽窄、字数多，可升至1.75避免视觉粘连
为什么设置了 line-height，表格文字还是贴顶或下沉？
这不是 line-height 失效，而是 vertical-align 在起作用。默认 td 和 th 的 vertical-align: middle 会让文字在单元格内垂直居中，但这个“居中”是基于单元格高度算的——如果单元格没设 height，高度就由内容撑开，line-height 只决定行内空间，不控制单元格整体高度。
解决方向：
- 若想单行文字在单元格中真正垂直居中，用
line-height等于单元格高度（仅适用于单行）：例如td { height: 40px; line-height: 40px; } - 若为多行内容，别硬调
line-height去“模拟居中”，应配合padding或display: flex+align-items: center - 检查是否父级
table或tr有height、min-height或vertical-align覆盖了单元格行为
移动端表格行高容易被忽略的细节
表格在小屏上常横向滚动或缩小显示，此时 font-size 可能被浏览器自动压缩（尤其 iOS Safari），而固定 line-height 像素值不会同步缩放，导致行距崩坏。
关键点：
- 不要给
table设font-size后再用px行高——改用无单位值，它会跟随缩放后的实际字号重新计算 - 若用
rem或clamp()动态调字号，line-height: 1.6依然可靠；line-height: 24px则彻底脱钩 - 测试时打开开发者工具的“设备模拟”，手动缩放页面，观察行框是否随文字自然呼吸——加
border: 1px solid red到td可直观看到行框范围
