直接设tr的height经常失效是因为浏览器对其支持极弱，Chrome完全忽略、Firefox表现不一致，行高实际由td/th的height、line-height、padding及内容共同决定。

直接设 tr 的 height 为什么经常失效？

浏览器对 tr 元素的 height 支持不一致，尤其在内容高度超过设定值时，tr 会被撑开——这不是 bug，而是表格渲染规范决定的：行高最终由单元格内容和样式共同决定。Chrome 可能“看起来生效”，Firefox 和 Safari 往往忽略。

• tr { height: 40px } 在多数现代浏览器中只是“建议值”，不具强制力
• 若某 td 内含两行文字或图片，tr 实际高度仍会大于 40px
• 不同浏览器对 vertical-align 和 line-height 的处理差异会进一步放大这种不可控性

所以，真正稳定控制行高的方式，是把高度逻辑落到 td 或 th 上。

用 td 的 padding 和 height 精确控制行高

这是最可靠、兼容性最好的做法。关键不是“压住”行高，而是让单元格自身具备明确的高度语义，并配合垂直对齐。

• 给 td, th 同时设 height 和 line-height（两者值相等），再加 vertical-align: middle，文字就能稳稳居中
• 优先用 padding-top / padding-bottom 替代 height，更利于内容自然撑开又保持呼吸感
• 避免给 tr 设 height 后再给 td 设不同 height，容易触发渲染冲突

例如：

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

td {
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
  padding: 0 12px;
}

这样每行视觉高度统一，且不会因字体大小微调而错位。

内容变多时，如何让行高“弹性自适应”而不崩坏？

固定高度适合表单类表格，但数据表格常需响应内容长度。此时应放弃“强制统一行高”，改用“最小行高 + 内容撑开 + 溢出控制”。

• 对 td 设 min-height: 40px，而非 height，允许内容多时自然增高
• 配合 word-break: break-word 和 max-width 防止长文本横向撑破整行
• 若需限制最大高度（比如防止图片拉高整行），可给 td 加 max-height: 120px; overflow: hidden，但要慎用——会截断内容

注意：min-height 在 td 上 IE9+ 支持良好，无需 hack；但不要对 tr 使用 min-height，它完全无效。

表格整体高度自适应时，行高策略怎么配合？

当整个 table 要随内容伸缩（比如嵌入卡片、弹窗或动态数据面板），行高必须“退让”：不能靠固定值锁死，而要成为整体弹性的一部分。

• table 保持 height: auto（默认即如此）
• 所有 td 移除 height，改用 padding 提供基础间距
• 若某列需对齐（如操作按钮列），可用 vertical-align: top + padding 统一顶部基准
• 真正需要“等高行”的场景（如带状态徽标的多行数据），应换用 display: grid 或 flex 容器模拟表格语义，而不是硬拗 table

表格的自适应本质是“放弃控制每一行，转而控制每一单元格的边界与行为”。最容易被忽略的是：你不是在调进行高，而是在定义单元格如何承载内容。