为什么Bootstrap折叠面板里的表格会改变宽度？

Question

为什么Bootstrap折叠面板里的表格会改变宽度？

twitter-bootstrap-3panelhtml-tablecollapsable

11

我已经在这里创建了一个 Bootply 的演示：http://www.bootply.com/Ss2aAnzqlZ。

这是一个带有表格的面板，类似于 http://getbootstrap.com/components/#panels-tables。但是，我还使面板可以折叠。折叠部分正常工作，但表格本身并没有保持形状。正如您在 Bootply 中看到的那样，在首次加载页面时，它不会填充面板的宽度。当您在面板标题中单击“Improvements”以折叠面板时，表格在动画期间占用整个面板宽度，然后消失。当您再次单击以显示面板内容时，在动画停止时，表格是全宽度，然后缩小回看起来像是“自动”宽度。

奇怪的是，检查表格元素时，表格本身是全宽度的，但 thead、tbody 和 tfoot 却不是。

我已经追踪到问题出现在表格中存在“collapse”类。如果您在不使用“collapse”类的情况下启动 Bootply，则在折叠面板之前它将是全宽度。当您展开它时，它会恢复到自动宽度。我不知道为什么...... 您知道吗？

这是代码片段，但似乎无法运行折叠效果。在 Bootply 上查看更佳。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="#" data-toggle="collapse" data-target="#improvementsPanel" aria-expanded="true" class="">Improvements</a>
        </div>
        <table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
            <thead>
                <tr>
                    <th>Description</th>
                    <th class="text-right">Qty</th>
                    <th>UOM</th>
                    <th class="text-right">Rate</th>
                    <th class="text-right">Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td class="text-right">133.00</td>
                    <td>m²</td>
                    <td class="text-right">425.00</td>
                    <td class="text-right">56,525</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td class="text-right">85.00</td>
                    <td>m²</td>
                    <td class="text-right">70.00</td>
                    <td class="text-right">5,950</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td class="text-right">25.00</td>
                    <td>m²</td>
                    <td class="text-right">100.00</td>
                    <td class="text-right">2,500</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                    <td class="text-right"></td>
                    <td></td>
                    <td class="text-right"></td>
                    <td class="text-right">1,500</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th class="text-right" colspan="4">Total</th>
                    <th class="text-right">66,475</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

- Phil Cairns

2个回答

9

或者，您可以添加以下CSS：

table.collapse.in {
   display: table;
}

可以说，这可能是对 component-animations.less 的修补。

- Brian M. Hunt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ChaoticNadirs · Accepted Answer

collapse 类在表格的显示样式之间切换为 none 和 block，这似乎干扰了标准表格 CSS。

您可以通过将表格放入一个 div 中，并将该 div 设置为 collapse 而不是表格来解决此问题。

新 Bootply：http://www.bootply.com/L8h2OdpMuD

HTML：

<div style="margin: 15px">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="#" data-toggle="collapse" data-target="#improvementsPanel" aria-expanded="true" class="">Improvements</a>
        </div>
        <div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
            <table class="table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th class="text-right">Qty</th>
                        <th>UOM</th>
                        <th class="text-right">Rate</th>
                        <th class="text-right">Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Item 1</td>
                        <td class="text-right">133.00</td>
                        <td>m²</td>
                        <td class="text-right">425.00</td>
                        <td class="text-right">56,525</td>
                    </tr>
                    <tr>
                        <td>Item 2</td>
                        <td class="text-right">85.00</td>
                        <td>m²</td>
                        <td class="text-right">70.00</td>
                        <td class="text-right">5,950</td>
                    </tr>
                    <tr>
                        <td>Item 3</td>
                        <td class="text-right">25.00</td>
                        <td>m²</td>
                        <td class="text-right">100.00</td>
                        <td class="text-right">2,500</td>
                    </tr>
                    <tr>
                        <td>Item 4</td>
                        <td class="text-right"></td>
                        <td></td>
                        <td class="text-right"></td>
                        <td class="text-right">1,500</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th class="text-right" colspan="4">Total</th>
                        <th class="text-right">66,475</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>