直接给设height无效，因css规范未将视为可设高度的盒子，真正生效的是和；应通过height+line-height+vertical-align等组合控制行高。
为什么直接给 <tr> 设 <code>height 没用
Chrome 完全忽略 <tr> 上的 <code>height，Firefox 表现也不一致——这不是 bug，是 CSS 规范没把 <tr> 当作可设高度的盒子。真正起效的只有 <code><td> 和 <code><th>。<p>常见错误现象：在 <code><tr style="height: 48px"> 里写样式，DevTools 显示它“存在”，但 computed height 还是 auto，文字贴顶或撑开整行。<ul><li>删掉所有 HTML 属性里的 <code>height（如 <td height="40">），W3C 已弃用<li>检查是否误把 <code>line-height 写在 <table> 或 <code><tbody> 上——它不会向下穿透到单元格<li>确认没有父级设了 <code>font-size: 0（比如清除 inline 间隙的 hack），否则无单位 line-height 计算结果为 0
td 和 th 上怎么设单行固定高度
单行文本（如后台列表、状态卡片）要视觉高度统一，必须同时控制容器高度和文字垂直位置，仅靠 line-height 不够。
- 写死像素值：
td, th { height: 48px; line-height: 48px; vertical-align: middle; padding: 0; box-sizing: border-box; } -
height和line-height必须相等，否则文字会偏上或偏下 - 显式写
padding: 0，否则浏览器默认内边距会突破设定高度 - 加
border-collapse: collapse到<table>，否则分离边框叠加会让实际高度浮动<h3>多行内容或含图片时怎么保最小行高</h3> <p><code>line-height对换行、图片、图标完全失效：图片不参与行高计算，多行文本直接撑开单元格。此时“最小行高”本质是“最小容器高度”，得换策略。- 放弃
height+line-height组合，改用min-height: 60px; display: flex; align-items: center; - 若需截断两行文本：
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; min-height: 48px; - 图片务必设
max-height: 100%; height: auto;，否则会突破容器 - 动态渲染中高度跳变？加
font-display: swap和图片width/height属性预留空间
移动端表格行高容易被忽略的细节
小屏下字体可能被 iOS Safari 自动压缩，固定
line-height: 20px会失准；而无单位值（如1.6）虽响应式友好，但若嵌套了small或strong，又没设font-size，继承链就断了。- 中文表格起步推荐
line-height: 1.6，窄列或多字字段可升至1.75 - 避免混用：父级
line-height: 1.5，子级又写line-height: 20px，节奏会断裂 - 关键区域加
min-height（如min-height: calc(100vh - 200px)），防白屏期高度坍塌
表格行高从来不是单一属性能搞定的事，
height、line-height、vertical-align、box-sizing、border-collapse必须协同生效，缺一不可。 - 放弃
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
