我有一个Bootstrap表，默认情况下显示三行数据和一个标题行。第5行有一个按钮，上面写着“更多..."。单击时，我希望将剩余的表行滑到视图中。

<table class="table table-condensed table-hover table-striped table-responsive table-noTopBorder noBottomMargin">
    <tr>
        <th>Date</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>07/11/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Ethics</a></td>
    </tr>
    <tr>
        <td>07/12/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 1</a></td>
    </tr>
    <tr>
        <td>
            07/13/2017
        </td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 2</a></td>
    </tr>
    <tr id="moreCLEEvents" class="collapse out">
        <td>
            08/07/2017
        </td>
        <td><a href="#" target="_blank">Professionalism in the Workplace</a></td>
    </tr>
    <tr>
        <td>
            <a href="#" class="btn btn-primary btn-xs" data-toggle="moreCLEEvents">more...</a>
        </td>
        <td>
            <a href="#" class="btn btn-primary btn-xs" target="_blank">Calendar View</a>
        </td>
    </tr>
</table>

我发现一些帖子展示了各种方法来显示/隐藏单独的表格行，但没有显示成组的或多行。我不能使用tbody，因为tbody没有高度，所以collapse失败。