<tr>的height属性基本无效，应删去并改用<td>/<th>的height+line-height+vertical-align+box-sizing控制；table-layout:fixed配合col宽度才能锁定行高；多行内容用max-height+overflow处理；响应式场景优先用min-height而非height。
直接在 <tr> 上写 height 基本无效
Chrome 完全忽略 <tr> 的 height 属性，Firefox 表现也不一致，这不是标准支持行为。哪怕你写了 <tr height="60">，实际渲染高度仍由 <td> 内容和默认 line-height 决定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
<tr>上的height属性——它不可靠，且会误导后续维护 - 把控制权交给
<td>或<th>：设height+line-height（值相等）+vertical-align: middle - 必须加
box-sizing: border-box，否则padding会突破设定高度 - 禁用默认上下内边距：
padding: 0 8px（左右留白，上下清零）
table-layout: fixed 是稳定高度的前提
默认的 table-layout: auto 会让浏览器先读内容再算列宽行高，导致高度随内容浮动、height 设置失效。尤其当某列有长文本或图片时，整行会被顶高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed - 配合显式列宽：
<col width="120">或 CSS 中col { width: 120px } - 此时
<td>的height才真正“锁住”——哪怕内容溢出，高度也不变（需额外处理溢出） - 注意：
table-layout: fixed下，<th>文字换行可能被截断，建议加white-space: normal
多行内容怎么不撑高？用 max-height + overflow 组合
line-height 只对单行有效；一旦单元格里有换行、<br>、<p> 或图片，高度立刻失控。这时候靠 height 已经没用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
max-height: 80px+overflow: hidden截断超长内容 - 需要省略号？补上
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical - 若要保留可滚动，改用
overflow-y: auto，但需限制容器高度（如父<td>设height: 80px） - 避免对
<tr>设max-height——它不生效，只作用于块级元素
响应式场景下别硬写 height，改用 min-height 和媒体查询
固定 height 在小屏上容易造成内容被裁、滚动困难；在大屏上又显得空荡。真正健壮的做法是让高度“有底线、无上限”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 表格整体用
min-height: 300px，保证最小可用空间 - 关键行（如表头）用
min-height: 48px，兼顾文字大小与触摸目标 - 移动端加媒体查询：
@media (max-width: 768px) { td { padding: 6px 4px; } } - 慎用百分比高度（如
height: 50%）——它依赖父容器高度，而表格父容器常为auto，结果就是 0
最易被忽略的一点：所有高度控制都建立在内容“不意外撑开”的前提上。图片没设 max-width: 100%、字体加载延迟导致重排、甚至 font-display: swap 引起的跳变，都会让预设高度瞬间失效。上线前务必用真实数据+不同设备验证。
