表格行高度过渡问题：悬停展开info元素时如何实现平滑过渡？

这个问题我之前也碰到过，表格行的高度过渡确实有点 tricky——因为表格行的高度是由内部内容自动计算的，直接给 <tr> 加 transition: height 根本不会生效，浏览器没法对「自适应高度」做过渡动画。不过我们可以换个思路，通过控制展开内容的容器属性来实现平滑效果，具体方案如下：

核心思路：把展开内容放进可过渡的容器里 #

表格行的高度变化本质是内部内容高度变化导致的，所以我们不需要直接改行高，而是把需要展开的info内容包裹在一个独立容器中，通过控制这个容器的max-height、opacity等可过渡属性，间接实现行高的平滑变化。

1. 调整HTML结构 #

给需要展开的info内容套一个容器，比如<div class="info-wrapper">，确保它是表格单元格内的子元素：

<table>
  <tr class="hover-row">
    <td>
      基础内容
      <div class="info-wrapper">
        这里是鼠标悬停时要展开的详细信息，内容可以是多行或者复杂结构...
      </div>
    </td>
  </tr>
</table>

2. 用CSS实现平滑过渡 #

通过给容器设置初始的「折叠状态」和hover时的「展开状态」，配合transition属性完成动画：

.hover-row {
  cursor: pointer; /* 提示用户这行可交互 */
}

.info-wrapper {
  max-height: 0; /* 初始折叠，高度为0 */
  opacity: 0; /* 初始透明 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  transition: max-height 0.3s ease, opacity 0.3s ease; /* 过渡动画 */
  padding: 0 12px; /* 初始无内边距，避免占位 */
}

.hover-row:hover .info-wrapper {
  max-height: 600px; /* 设一个足够大的值，确保能装下所有展开内容 */
  opacity: 1; /* 完全显示 */
  padding: 12px; /* 展开后加上内边距，提升排版美观度 */
}

3. 关键细节说明 #

• 为什么用max-height而非height？因为height需要固定值，而max-height可以自适应内容高度，只要设置的数值大于内容实际高度，就能保证完全展开，同时支持过渡动画。
• 可以自定义过渡时长和缓动函数，比如把0.3s ease改成0.5s ease-in-out，让动画节奏更符合你的需求。
• 如果展开内容高度固定，也可以把max-height设为实际高度，过渡效果会更精准。

这种纯CSS方案不需要JavaScript介入，性能好且易维护，能完美实现表格行hover时的平滑展开效果。

内容的提问来源于stack exchange，提问作者user6665922