唯一能稳定锁死<td>高度的组合是设height+line-height+overflow:hidden，且box-sizing:border-box、padding:0；<tr>上设height无效，因浏览器不支持该属性，实际行高由单元格内容决定。
直接给 <td> 设 height + line-height + overflow: hidden，并确保 box-sizing: border-box 和 padding: 0 —— 这是唯一能稳定锁死高度、不被内容撑开的组合。
为什么 <tr> 上设 height 没用
Chrome 完全忽略 <tr> 的 height 样式，Firefox 表现也不一致；它不是标准支持属性，浏览器渲染时会优先按单元格内容或行内 line-height 计算。你看到的“行高”其实是所有 <td> 中最大高度决定的，不是 <tr> 自己说了算。
- 别在
<tr>上写height，写了也白写 - 哪怕只有一列
<td>内容多一行，整行都会被拉高 - 调试时得检查整行所有单元格，不能只盯一个
<td> 高度被撑开的真正原因
默认 box-sizing: content-box 下，padding 会额外加到 height 上；vertical-align（默认 baseline）会让文字基线对齐，导致上下留白不可控；图片没设尺寸也会顶高单元格。
- 必须加
box-sizing: border-box，否则height: 40px+padding: 8px实际变成 56px - 清空默认
padding：padding: 0，再按需单独加 - 图片要加
height: auto; max-width: 100%; display: block;，删掉width/height内联属性
单行文本怎么锁死 40px 高度
这是最常见也最稳的场景：后台列表、状态栏、操作按钮组。核心是让文本“占满”高度且不换行。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
height: 40px+line-height: 40px（值必须相等） -
vertical-align: middle确保垂直居中 -
overflow: hidden截断溢出内容（比如超长用户名） - 如果单元格可能为空，加
:empty::before { content: "\200b"; }防塌陷
多行内容还想固定高度怎么办
line-height 对多行无效，min-height 在 <td> 上默认不生效——因为 display: table-cell 不尊重它。
- 最可靠方案：在
<td>内嵌一层<div>，对这个<div>设min-height/max-height+overflow: hidden - 避免直接给
<td>设display: flex或display: block，会破坏表格列宽对齐逻辑 - 如果必须截断多行文本，用
display: -webkit-box+-webkit-line-clamp: 2，但兼容性有限
真正容易被忽略的是：table-layout: fixed 虽然能稳住列宽，但它会让所有行高都服从第一行定义的尺寸逻辑——一旦你用 JS 动态插入内容，后续行可能被压缩或错位。锁高度这事，得从第一行就开始控制，不能只修补最后一行。
