Bootstrap折叠表格问题：默认隐藏行后点击位移，如何实现平滑无位移展开

问题描述 #

我用Bootstrap实现了带折叠功能的表格，默认隐藏第二行，但点击触发折叠时表格会发生位移，想实现无位移的平滑展开与收起动画。

原代码：

<table class="table table-hover">
<tbody>
    <tr data-bs-toggle="collapse" href="#collapse">
        <td>Info</td>
        <td>Some more Info</td>
        <td>And some Info</td>
    </tr>
    <tr id="collapse" class="collapse">
        <td>Hidden by default</td>
        <td>Hidden by default</td>
        <td>Hidden by default</td>
    </tr>
</tbody>

解决方案 #

直接给<tr>加collapse类会破坏表格布局导致位移，换个思路，把折叠内容放在单元格内，配合自定义CSS实现平滑动画：

1. 调整HTML结构 #

把需要折叠的内容放到一个跨列的<td>里，内部用容器模拟原表格列布局，保证表格结构稳定：

<table class="table table-hover">
  <tbody>
    <tr data-bs-toggle="collapse" href="#collapseContent">
      <td>Info</td>
      <td>Some more Info</td>
      <td>And some Info</td>
    </tr>
    <tr>
      <!-- colspan值和表格列数保持一致 -->
      <td colspan="3" class="p-0">
        <div id="collapseContent" class="collapse">
          <div class="d-flex">
            <div class="flex-fill p-3 border">Hidden by default</div>
            <div class="flex-fill p-3 border">Hidden by default</div>
            <div class="flex-fill p-3 border">Hidden by default</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

2. 自定义CSS优化动画 #

用max-height过渡代替默认的高度动画，避免布局跳动：

#collapseContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#collapseContent.show {
  max-height: 200px; /* 设置足够容纳内容的高度，根据实际情况调整 */
}

关键说明 #

• 用<td colspan="3">让折叠内容单元格占满整行，保持表格列结构不变，从根源避免位移
• 内部的d-flex和flex-fill是为了还原原表格的三列视觉效果，和原行样式保持一致
• max-height过渡比直接修改height更平滑，不会因为内容高度变化导致动画断层

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