Html 我想在表行中使用引导折叠，但它的工作方式类似于切换

我想使用表中的引导折叠来显示行中的数据。当用户单击某一行时，它将展开该行并显示更多信息。但当用户单击任何其他行时，它将展开，展开的行信息将不可见。但事实并非如此。它像拨动开关一样工作

我的代码是：

<div class="container">
  <div class="panel-group" id="accordion">

      <table class="table table-striped">
         <thead>
          <tr>
            <th> ID </th>
            <th>Name</th>
            <th>points</th>
        </thead>
        <tbody>
         {% for post in posts %}
            <tr>

             <td> 
                <div class="panel panel-default">
                  <div class="panel-heading">
                  <h4 class="panel-title">
                    <a class="detail" data-toggle="collapse" data-parent="#accordion" href="#{{post.Driver.driverId}}"> {{post.Driver.driverId}}
                    </a>  
                   </h4>
                  </div> 
                  <div id="{{post.Driver.driverId}}" class="panel-collapse collapse">
                    <div class="panel-body">  {{post.Driver.givenName}}
                    </div>
                  </div>
                </div>    
           </td>
             <td>
                  {{post.Driver.givenName}} &nbsp; {{post.Driver.familyName}}
            </td>
            <td>{{post.points}}</td>

           </tr> 
        {% endfor %}
        </tbody>
  </table>
 </div>

身份证件
名称
要点
{posts%%中的post为%s}
{{post.Driver.givenName}
{{post.Driver.givenName}{{post.Driver.familyName}}
{{post.points}}
{%endfor%}

---

在这种情况下，它可以很好地上下滑动。这对你有用吗？请注意：您没有正确地关闭

th

中的行。但我需要使用循环来创建行元素。这部分实际上是切换而不是折叠。我使用了div元素，它工作得很好。更新了之前海报的提琴，在这里使用了两行，似乎工作得很好，因为我希望折叠可以工作。。。