Bootstrap表格折叠行无过渡效果问题咨询

当然可以实现表格行折叠的平滑过渡效果，问题出在你直接给<tr>元素应用了collapse类——表格行（<tr>）默认的display: table-row属性不支持max-height的CSS过渡动画，而Bootstrap Collapse组件正是靠这个属性实现平滑展开/收起的。

修复方案 #

把折叠内容包裹在<td>内部的<div>中，将collapse类应用到这个div上，而不是直接加在<tr>上。这样既保留表格结构，又能让过渡动画正常工作。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapse Test</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
                            V
                        </button> ID 1
          </td>
          <td>Dog</td>
          <td>Cat</td>
          <td>Fish</td>
        </tr>
        <tr>
          <td colspan="4">
            <div class="collapse" id="collapseExample1">
              <p>Here's some content that will be hidden until you expand ID1.</p>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus quisquam est quia ducimus quos alias distinctio illum voluptates sunt facere. Perferendis in vero optio? Laudantium, non debitis ratione fuga perspiciatis nihil quasi possimus,
                dolorem tempore illo at molestias aspernatur hic autem! Perspiciatis culpa voluptatum totam deleniti qui aliquam, tempore nisi sequi et.</p>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
                            V
                        </button> ID 2
          </td>
          <td>Apple</td>
          <td>Banana</td>
          <td>Orange</td>
        </tr>
        <tr>
          <td colspan="4">
            <div class="collapse" id="collapseExample2">
              <p>Here's some content that will be hidden until you expand ID2.</p>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus quisquam est quia ducimus quos alias distinctio illum voluptates sunt facere. Perferendis in vero optio? Laudantium, non debitis ratione fuga perspiciatis nihil quasi possimus,
                dolorem tempore illo at molestias aspernatur hic autem! Perspiciatis culpa voluptatum totam deleniti qui aliquam, tempore nisi sequi et.</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>

</body>

</html>

关键说明 #

• 移除了<tr>上的collapse类，将其转移到<td>内部的容器div上
• 按钮的data-bs-target依然指向对应的折叠容器ID，逻辑保持不变
• div元素支持max-height的CSS过渡，完美适配Bootstrap Collapse的动画机制

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