twitter-bootstrap-3 - 折りたたみ可能な Bootstrap パネルのテーブルの幅が変わるのはなぜですか?

Question

ここに Bootply のデモをまとめました: http://www.bootply.com/Ss2aAnzqlZ。

これは、http: //getbootstrap.com/components/#panels-tablesに従ってテーブルを含むパネルです。ただし、パネルを折りたたむこともできます。折りたたみビットは正常に機能しますが、テーブル自体は形状を保持しません。Bootply でわかるように、最初にページをロードしたときに、パネルの幅がいっぱいになりません。パネル ヘッダーの [改善] をクリックしてパネルを折りたたむと、アニメーション中に表がパネルの幅全体を占めてから消えます。もう一度クリックしてパネル コンテンツを表示すると、アニメーションが停止するまでテーブルは全幅で表示されます。アニメーションが停止すると、縮小して「自動」幅のように見えます。

奇妙なことに、table 要素を調べると、テーブル自体は全幅ですが、thead、tbody、および tfoot はそうではありません。

テーブルに「崩壊」クラスが存在することを突き止めました。「折りたたみ」クラスなしで 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>

Answer 1

このcollapseクラスは、テーブルの表示スタイルを と の間で切り替えますnone。blockこれは、標準のテーブル CSS に干渉しているようです。

これを解決するには、テーブルを div 内に配置し、その div をテーブルではなく折りたたみに設定します。

新しい 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>