Bootstrap：单击标题时折叠整个正文答案

【问题标题】：Bootstrap: collpase the entire tbody when clicking the headerBootstrap：单击标题时折叠整个正文
【发布时间】：2018-12-29 22:54:00
【问题描述】：

我有一张这样的桌子

我想实现点击“click here to Collapse”时，后面的3行会被折叠，只渲染thead的目标。然后，再次单击它，将再次显示完整的表格。

我试过这样的代码，但它根本不起作用。如何解决？谢谢！

<main class="container" role="main">
    <table class="table">
        <thead>
            <tr>
                <th class="bg-primary text-center font-weight-bold text-white" scope="col" colspan="7">
                     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">click here to Collapse</a>
                </th>
            </tr>
        </thead>
        <div class="collapse" id="collapseExample">
            <tbody>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
            </tbody>
        </div>
    </table>
</main>

【问题讨论】：

标签： twitter-bootstrap html-table collapse

【解决方案1】：

如果我将代码更改为下面，它会以某种方式工作。但是动画效果看起来很别扭总的来说，我把div去掉，直接把collapse放到tbody上。

<main class="container" role="main">
    <table class="table">
        <thead>
            <tr>
                <th class="bg-primary text-center font-weight-bold text-white" scope="col" colspan="7">
                     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">click here to Collapse</a>
                </th>
            </tr>
        </thead>
        <tbody class="collapse" id="collapseExample">
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
        </tbody>
    </table>
</main>

【讨论】：