th上设line-height有时没反应，是因为它只控制行框高度而不撑开容器本身；若th无内容、含空格、border-collapse: separate或内部有vertical-align: top等干扰，line-height便不可见；单行表头需配合height、vertical-align: middle、box-sizing: border-box和padding: 0才能稳定垂直居中；多行场景应改用min-height、flex布局或-webkit-line-clamp截断。
th 上设 line-height 为什么有时没反应
不是 line-height 失效，而是它只控制“行框高度”，不强制撑开 th 容器本身。如果 th 没内容、或内容是空格、或父级 table 用了 border-collapse: separate，浏览器会按最小内容高度渲染，line-height 就“看不见”。更常见的是：内部套了 <span></span> 或加了 vertical-align: top，干扰了行框形成。
单行表头怎么用 line-height 稳定撑高
必须配合 height 和 vertical-align 才能视觉锁死——line-height 单独撑不开，但它是垂直居中的关键杠杆。
-
th { height: 48px; line-height: 48px; }—— 两者值相等，文字才能真正在容器中垂直居中 - 显式写
vertical-align: middle;，避免被父级table或tr的默认值覆盖 - 加
box-sizing: border-box;+padding: 0;，否则上下padding会让实际高度突破48px - 删掉 HTML 中的
height属性（如<th height="48">），W3C 已弃用，且会和 CSS 冲突 <h3>多行表头或带换行文本的 <code>th怎么办line-height在多行场景下完全不控容器高度，强行设高值只会让行距松垮，无法限制总高。此时必须放弃“靠line-height撑”的思路。- 用
min-height: 64px;设底线，防内容过少时塌陷 - 用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;截断超出行数 - 若需完整多行+自适应，改用
display: flex; align-items: center;替代传统表格布局（尤其在响应式表头中更可控） - 务必加
table-layout: fixed;，否则列宽浮动会导致th高度随内容缩放异常
容易被忽略的兼容性细节
移动端 Safari 对
line-height的解析受系统字体缩放影响；iOS 17+ 启用“动态类型”时，固定像素值（如line-height: 24px）可能被强制重算。无单位值（如line-height: 1.6）虽更安全，但在th中若未同步设font-size，继承链断裂后实际行高可能远低于预期。- 中文表头推荐起步值：
line-height: 1.6;，窄列或多字字段（如“用户注册来源渠道标识符”）升到1.75 - 避免在
table或tr上设line-height—— 它不会向下传递到th，Chrome 直接忽略 - 检查开发者工具的 “Computed” 面板，确认最终生效的
line-height是不是你写的那个值，常被user agent stylesheet或重置库覆盖
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
