Bootstrap Tabs與表大小

所以我試圖使用引導選項卡系統來顯示使用DataTables形成的各種表。除了當我切換標籤頁時，thead get的大小混亂，除此之外，它都可以工作。Bootstrap Tabs與表大小

HTML：

<div class="tab-content"> 
    <div class="tab-pane active" id="overview" role="tabpanel"> 
     <br/> 
     <table id="overview_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>{{ etf1 }}</th> 
       <th>{{ etf2 }}</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 
    <div class="tab-pane" id="holdings" role="tabpanel"> 
     <br/> 
     <table id="holdings_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>{{ etf1 }}</th> 
       <th>{{ etf2 }}</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 
    <div class="tab-pane" id="performance" role="tabpanel"> 
     <br/> 
     <table id="performance_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>{{ etf1 }}</th> 
       <th>{{ etf2 }}</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 
    <div class="tab-pane" id="technicals" role="tabpanel"> 
     <br/> 
     <table id="technicals_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>{{ etf1 }}</th> 
       <th>{{ etf2 }}</th> 
      </tr> 
      </thead> 
     </table> 
    </div> 
</div>

的Javascript：

$(document).ready(function() { 
     $.getJSON('/fund_monitor/api/get-comparison/{{ etf1 }}/{{ etf2 }}', function (data) { 
      $('#performance_table').DataTable({ 
       data:   data['overview'], 
       scrollY:  200, 
       scrollCollapse: true, 
       paging:   false, 
       ordering:  false, 
       responsive:  true 
      }); 



      $('#holdings_table').DataTable({ 
       data:   data['holdings'], 
       scrollY:  200, 
       scrollCollapse: true, 
       paging:   false, 
       ordering:  false, 
       responsive:  true 
      }); 



      $('#technicals_table').DataTable({ 
       data:   data['technicals'], 
       scrollY:  200, 
       scrollCollapse: true, 
       paging:   false, 
       ordering:  false, 
       responsive:  true 
      }); 
      $('#overview_table').DataTable({ 
       data:   data['overview'], 
       scrollY:  200, 
       scrollCollapse: true, 
       paging:   false, 
       ordering:  false, 
       responsive:  true 
      });

所以thead是預定義的，所以我認爲這是問題。如何在調用DataTable之後使用javascript調整thead cells的大小？奇怪的是，第一個標籤完全正常工作，但其餘的都沒有。

來源

2017-08-28 anderish

的[表標題列不使用固定報頭保持寬度]可能的複製（https://stackoverflow.com/questions/22818254/table-header-columns-not-maintaining-width-using-fixed-header ） – Patrick

這些選項卡可能會導致一些亂七八糟的CSS行爲。我在我的項目上所做的是在每個標籤點擊時重置css。下面的示例適用於您的示例，但您可能希望對您的css應用程序比對所有表更具體。

$('#TabGroup a').click(function (e) { 
      e.preventDefault(); 
      $(this).tab('show'); 

      var tableWidth = // determine table/page/div width as integer //;    
      $('table').removeAttr('style').css("width", tableWidth);  

     });

來源

2017-08-29 01:38:31 Aeroradish

Bootstrap Tabs與表大小

回答

相關問題