數據表頭中引導標籤

Question

沒有對準我試圖使用數據表與Twitter引導標籤和我試圖下面的代碼，它成功地調用DataTable，並創造的dataTable但TAB2 DataTable的頭部有未對齊的

<div> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Data table 1</a> 

     </li> 
     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Data table 2</a> 

    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="home"> 
      <table class="table" id="table1"> 
       <thead> 
        <tr> 
         <th>#</th> 
         <th>First table</th> 
         <th>First table</th> 
         <th>First table</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <th scope="row">1</th> 
         <td>Mark</td> 
         <td>Otto</td> 
         <td>@mdo</td> 
        </tr> 
        <tr> 
         <th scope="row">2</th> 
         <td>Jacob</td> 
         <td>Thornton</td> 
         <td>@fat</td> 
        </tr> 

       </tbody> 
      </table> 
     </div> 
     <div role="tabpanel" class="tab-pane" id="profile"> 
      <table class="table" id="table2"> 
       <thead> 
        <tr> 
         <th>#</th> 
         <th>second table</th> 
         <th>second table</th> 
         <th>second table</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <th scope="row">1</th> 
         <td>Mark</td> 
         <td>Otto</td> 
         <td>@mdo</td> 
        </tr> 
        <tr> 
         <th scope="row">2</th> 
         <td>Jacob</td> 
         <td>Thornton</td> 
         <td>@fat</td> 
        </tr> 

       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

當我添加scrollY頭被un-對準

Answer 1

它，因爲你的第二個選項卡是隱藏的，當你初始化和滾動表2。這是一個工作示例。 jsFiddleDemo

$("#table1").DataTable({ 
    "scrollY": 308, 
    "paging": false, 
    "responsive": true 
}); 
$('a[href="#profile"]').one('click',function(){ 
    setTimeout(function(){ 
     $("#table2").DataTable({ 
      "scrollY": 308, 
      "paging": false, 
      "responsive": true 
     }); 
    },0); 
});