的height属性不可靠，因HTML规范将其列为非强制实现特性，Chrome完全忽略、Firefox表现不一致；真正有效的是在上同时设置height、line-height（值相等）、vertical-align、box-sizing:border-box及padding:0。

别在 <tr> 上设 <code>height，它在 Chrome 里基本不生效，Firefox 表现也不一致——这不是 bug，是规范本就不保证支持。

为什么 <tr> 的 <code>height 属性靠不住

HTML 标准中 <tr> 的 <code>height 属性属于“非强制实现”特性，浏览器可选择忽略。实际测试中：

• Chrome 完全无视 <tr style="height: 40px">，只看内部 <code><td> 的渲染结果 <li>Firefox 可能部分响应，但一旦单元格含图片、多行文本或 padding，高度立刻被撑开</li> <li>用 HTML 旧式写法 <code><tr height="40"> 更危险：W3C 已明确弃用，且和 CSS 冲突时优先级混乱 <h3><code><td> 和 <code><th> 上设 <code>height + line-height 才真有效

  这是目前最稳定、兼容性最好的单行控高方案，核心是让容器高度和文字行高对齐，同时切断 padding 干扰：

  • 必须同时设置 height 和 line-height，且值相等（如都为 40px）
  • 加 vertical-align: middle 实现垂直居中
  • 加 box-sizing: border-box + padding: 0，否则哪怕 padding: 2px 都会让最终高度变成 44px
  • 禁用 border-collapse: separate（即默认状态），改用 border-collapse: collapse，避免 cellspacing 导致高度浮动

  td {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ccc;
  }

  遇到多行内容或图片时，height 就该让位了

  只要单元格里出现换行、<img alt="HTML表格行高怎么调整？height属性设置方案" >、<div> 或任意块级子元素，<code>height 就失去控制力——它只约束“内容区”，不压制溢出。

  立即学习“前端免费学习笔记（深入）”；

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • 多行文本：用 max-height: 80px + display: -webkit-box + -webkit-line-clamp: 2 截断（注意 Safari/Chrome 支持，Firefox 需 fallback）
  • 含图片：图片必须设 max-height: 100% + vertical-align: middle，否则会顶破容器
  • 动态渲染（React/Vue）：首次加载时高度跳变，大概率是图片没占位，加 min-height: 40px 预留空间，再配合 font-display: swap

  CSS table-layout: fixed 是隐藏关键点

  当表格列宽或行高严重不稳定时，table-layout: fixed 往往是最后一招——但它会强制按第一行定义的宽度/高度分配所有行，忽略后续内容实际尺寸。

  • 启用后，<td> 的 <code>width 和 height 才真正“管用”
  • 副作用明显：长文本会被截断，需搭配 overflow: hidden 或 text-overflow: ellipsis
  • 不适用于需要自适应内容高度的场景（比如后台日志表格），此时应放弃固定高，改用 min-height + 弹性内边距

  真正难的不是怎么设高，而是判断什么时候不该设高——内容驱动的高度变化本身是合理的，强行锁死反而引发截断、溢出、移动端错位。多数所谓“高度不准”，其实是没处理好图片占位、字体加载时机或父容器约束。