如何为表格行实现实际高度展开的CSS动画（仅用表格元素）

我完全懂你的困扰——用transform: scale(1,0)做表格行展开动画时，虽然视觉上有展开效果，但行的实际占位还在，留下个空壳；而直接给<tr>加max-height动画又完全没效果，这都是表格布局的特殊性导致的。

表格行(<tr>)的高度是由内部单元格(<td>)的内容决定的，浏览器会自动计算行高，所以直接对<tr>做高度或max-height动画根本不生效；而transform只是视觉上的缩放，不会改变元素实际占据的空间，所以空壳问题必然出现。

可行的解决方案：给单元格做max-height动画 #

既然行高由单元格决定，我们可以把动画应用到<tr>内部的所有<td>上，通过动画单元格的max-height来带动行的高度变化，同时配合overflow: hidden隐藏初始状态的内容。

修改后的代码如下：

HTML（保持不变）

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr class="add-row-animation">
    <td>three</td>
    <td>four</td>
  </tr>
</table>

CSS

table{
  border: 1px solid black;
  border-collapse: collapse; /* 合并边框，避免动画时边框错位 */
  width: 100%;
}

tr td{
  border: 1px solid black;
  padding: 8px; /* 给单元格加内边距，让内容更美观 */
}

tr.add-row-animation td{
  max-height: 0;
  overflow: hidden;
  padding-top: 0; /* 初始状态去掉内边距，避免留白 */
  padding-bottom: 0;
  animation: addRow 2s 1 linear forwards; /* forwards让动画停在最后一帧 */
}

@keyframes addRow{
  0% {
    max-height: 0;
    background-color: #fff;
    padding-top: 0;
    padding-bottom: 0;
  }
  50%{
    background-color: orange;
  }
  100% {
    max-height: 2em; /* 设置一个比内容实际高度大的值，确保能完全展开 */
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

关键细节说明： #

• 必须给单元格设置overflow: hidden，否则内容会在max-height: 0时依然显示
• 动画里同时处理内边距(padding)，避免初始状态下内边距占据空间
• max-height的目标值要设置得比单元格内容的实际高度大一些，如果不确定内容高度，可以用1000px这种足够大的值，动画时间调整合理的话，视觉上不会有问题
• 使用animation-fill-mode: forwards（简写在animation属性里），让动画结束后保持最后一帧的状态，避免行又缩回去

这样就能实现真正的行高度展开动画，不会留下空壳，而且完全只用表格元素实现~

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