Bootstrap折叠调整大小表

Question

    <div class="row">
        <div class="col-md-8"> 
            <h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
            <table class="table table-bordered collapse" id="collapseList">
            <thead>
                <tr>
                    <th>List Id</th>
                    <th>List Name</th>
                    <th>Total Subscribers</th>
                    <th>Action</th>
                    <th>Problems</th>
                </tr>
            </thead>
            <tr>
                <td>a</td>
                <td>abcdefg</td>
                <td>a</td>
                <td>Synchronize</td>
                <td>NOK</td>
            </tr>
            </table>
        </div>
    </div>

这是我点击标题标签时的内容，它显示为1秒：

1秒后，这就是我所拥有的：

折叠后为什么我的表会调整大小？有没有办法不调整表格大小？

更新：

这是一个JSfiddle，您可以尝试看看自己是否存在问题https://jsfiddle.net/0zw5a845/

Answer 1

将以下CSS行添加到主样式表中。这基本上会覆盖引导样式表的.collapse.in选择器。

.collapse.in {display:table}

Updated JSFiddle

Answer 2

可能是因为你的div有一类col-md-8。

如果您想要一个跨越页面整个宽度的表格，请将课程更改为col-md-12。