Bootstrap 折叠调整表大小答案

【问题标题】：Bootstrap collapse resize tableBootstrap 折叠调整表大小
【发布时间】：2018-01-03 07:56:52
【问题描述】：

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

【问题讨论】：

有没有关于折叠的js代码？
不，我在这个页面上没有 javascript
请为我们提供一个 MVCE 示例，但我的猜测是，由于您使用的是 col-md-8 而不是 col-md-12，因此您的潜水正在展开。
我尝试了 col-md-12 并出现了同样的问题，除了最后表更大我所做的已经是 MVCE 没有？ :(

标签： html css twitter-bootstrap collapse

【解决方案1】：

将以下 CSS 行添加到您的主样式表中。这实际上覆盖了引导样式表的.collapse.in 选择器。

.collapse.in {display:table}

Updated JSFiddle

【讨论】：

浏览器自然会使用display:table 属性呈现<table> 元素，但由于您明确将表格设置为块级元素，cell-padding、cell-spacing 和整体规则指示应该如何呈现表格本质上会改变。
非常感谢您的解释:)

【解决方案2】：

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

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

【讨论】：

这是我一开始遇到的问题，但同样的问题，除了在折叠期间的第二个动画期间表格更大