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与表大小

回答

相关问题