ブートストラップでdivブロックを折りたたむ代わりにテーブルを折りたたむ

Question

私は、テーブルをラップするdivブロックを避ける方法を探しています。誰もがこのブロックの動作をテーブルに適用する方法を知っていますか？

<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

私はdatabableすなわちexampleに与えられ、idてきました。 href="#collapseTwo"をhref="#example"に置き換えて、データテーブルを対象にします。私はまた、データテーブルが圧縮され、醜いように見えるので、クラスcollapseをdataTableから削除するためのjQueryスクリプトを追加しました。あなたが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>