Html 如何在引导中有多个可折叠行？

我当前有一个包含多行的表。我想知道是否有办法在第一排（即汽车）下折叠几排（即宝马、丰田和本田），而不移除“colspan”间距。我看到的所有示例似乎都必须丢失折叠行的格式

<table class="table table-sm table-hover">
<thead class="thead-inverse">

<thead>
    <tr>
        <th colspan="6"></th>
        <th colspan="3">Current Month</th>
        <th colspan="3">Year-to-Date</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
        <th colspan="6">Cars</th>
        <td colspan="3">456 mi</td>
        <td colspan="3">700 mi</td>
    </tr>
    <tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
        <td colspan="1"></td>
        <td colspan="5">Toyota</td>
        <td colspan="3">534 mi</td>
        <td colspan="3">800 mi</td>
    </tr>
    <tr>
        <th colspan="1"></th>
        <th colspan="5">Honda</th>
        <td colspan="3">600 mi</td>
        <td colspan="3">770 mi</td>
    </tr>
    </div>
</tbody>
</table>

当月
年初至今
汽车
456英里
700英里
丰田
534英里
800英里
本田
600英里
770英里

如果使用bootstrap，可能已经加载了jQuery，因此可以使用它在单击时查询和隐藏行。像这样：

(function() {
    $('#carsTable .toggle').on('click', function() {
        $('#carsTable .hideableRow').toggleClass('hiddenRow');
    });
})()

另一种可能性（不确定它是否能按您的需要工作）是将“toggler行”放在另一个tbody上或作为

的子对象，并在

上使用collapse类。像这样：

(function() {
    $('#carsTable .toggle').on('click', function() {
        $('#carsTable .hideableRow').toggleClass('hiddenRow');
    });
})()

---

第二种解决方案是完美的。一个简短的问题。在通过jQuery完全通过html实现它方面有没有最佳实践？有没有一种方法可以创建扩展动画？在我看来，如果使用引导，最好使用引导解决方案。但您可能无法设置动画，因为它是一个表。也许可以通过变换来改变s的高度。