通过 Bootstrap 折叠 table 而不是折叠 div 块

Question

我正在寻找避免包裹 table 的 div 块的方法。有谁知道如何将此块的行为应用于 table？

<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse"
             href="#collapseTwo" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" 
     role="tabpanel" aria-labelledby="headingTwo">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

Answer 1

我已经 id 给了数据，即 example。将 href="#collapseTwo" 替换为 href="#example" 以定位数据表。我还包含了一段 jQuery 脚本，用于从数据表中删除 class collapse，因为如果我不这样做，数据表就会被压缩并且看起来很难看。如果你想检查删除 script 并查看差异

$("#example").on('shown.bs.collapse', function(){
  $(this).removeClass('collapse');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse" 
             href="#example" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
        <table id="example" class="table table-bordered in">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

通过 Bootstrap 折叠 table 而不是折叠 div 块

Collapse the table instead of collapsing the div block by Bootstrap

twitter-bootstrap

bootstrap-table