我有一张这样的table

我想达到的目的是，当点击"单击此处折叠"时，后面的3行将被折叠，只呈现标题，然后再次点击，将重新显示完整的表格。
我试过这样的代码，但它不工作在所有。如何解决它？谢谢!

<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>