使用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 模拟。
立即学习“前端免费学习笔记（深入）”；
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 
.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 是最实用的方案，能避开表格布局限制，实现自然的行高展开收起效果。
以上就是在css中如何用transition制作表格行高过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032875.html
微信扫一扫 
支付宝扫一扫 
