данных не выровнены в бутстраповской вкладке

Question

Я пытаюсь использовать DataTable с Twitter Bootstrap Вкладки и что я пытаюсь следующий код, Его вызова DataTable успешно и создание DataTable, но для TAB2 DataTable заголовка получил MIS-выровненные

<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 заголовок получает не-выровнен

Answer 1

Its, потому что ваша вторая закладка скрыта при инициализации и прокручивать таблица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); 
});