唯一能稳定锁死高度的组合是设height+line-height+overflow:hidden，且box-sizing:border-box、padding:0；上设height无效，因浏览器不支持该属性，实际行高由单元格内容决定。
直接给 Chrome 完全忽略 <td> 设 <code>height + line-height + overflow: hidden，并确保 box-sizing: border-box 和 padding: 0 —— 这是唯一能稳定锁死高度、不被内容撑开的组合。
为什么
<tr> 上设 <code>height 没用
<tr> 的 <code>height 样式，Firefox 表现也不一致；它不是标准支持属性，浏览器渲染时会优先按单元格内容或行内 line-height 计算。你看到的“行高”其实是所有 <td> 中最大高度决定的，不是 <code><tr> 自己说了算。
<ul><li>别在 <code><tr> 上写 <code>height，写了也白写
<td> 内容多一行，整行都会被拉高
<li>调试时得检查整行所有单元格，不能只盯一个</li>
<h3><code><td> 高度被撑开的真正原因
<p>默认 <code>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 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
height: 40px+line-height: 40px（值必须相等） -
vertical-align: middle确保垂直居中 -
overflow: hidden截断溢出内容（比如超长用户名） - 如果单元格可能为空，加
:empty::before { content: "\200b"; }防塌陷
多行内容还想固定高度怎么办
line-height 对多行无效，min-height 在 <td> 上默认不生效——因为 <code>display: table-cell 不尊重它。
- 最可靠方案：在
<td> 内嵌一层 <code><div>，对这个 <code><div> 设 <code>min-height/max-height+overflow: hidden - 避免直接给
<td> 设 <code>display: flex或display: block，会破坏表格列宽对齐逻辑 - 如果必须截断多行文本，用
display: -webkit-box+-webkit-line-clamp: 2，但兼容性有限
真正容易被忽略的是：table-layout: fixed 虽然能稳住列宽，但它会让所有行高都服从第一行定义的尺寸逻辑——一旦你用 JS 动态插入内容，后续行可能被压缩或错位。锁高度这事，得从第一行就开始控制，不能只修补最后一行。
