引导程序：单击标题时折叠整个躯干

Question

我有一张这样的桌子

我希望实现以下目标：单击“单击此处以折叠”时，后面的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>

Answer 1

如果我将代码更改为以下代码，它将以某种方式起作用。但是动画效果看起来很尴尬 通常，我删除了div并将折叠直接放置到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>