使用max-height是实现表格行高过渡最实用的方法，通过设置max-height过渡并配合overflow:hidden，可在hover或点击时模拟内容展开动画，解决tr无法直接过渡height的问题。
在CSS中使用 transition 制作表格行高过渡，关键在于对 height 属性设置平滑动画。虽然表格行（tr）本身不支持直接的 height 过渡（因为 tr 的高度是内容决定的），但我们可以通过一些技巧实现视觉上的行高过渡效果。
使用 td 或 div 模拟行高过渡
推荐做法是在 td 内部使用一个块级元素（如 div），并控制该元素的高度和过渡。
|
这是一行可展开的内容
|
CSS 设置如下：
.content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.expandable:hover .content {
height: 40px; / 根据实际内容调整 /
}
使用 max-height 实现更灵活的过渡
由于无法对 auto 高度做过渡，可用 max-height 模拟。
立即学习“前端免费学习笔记（深入）”；
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.expandable:hover .content {
max-height: 100px; / 设置足够大的值以容纳内容 /
}
这种方式适合内容高度不确定的情况，只要 max-height 大于实际内容高度即可。
配合 JavaScript 控制展开状态
若需要点击切换，可用 JS 添加或移除类名：
document.querySelector('.expandable').addEventListener('click', function() {
this.classList.toggle('expanded');
});
对应 CSS：
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.expanded .content {
max-height: 100px;
}
基本上就这些方法。使用 max-height 是最实用的方案，能避开表格布局限制，实现自然的行高展开收起效果。
