javascript - Bootstrap 选项卡与表格大小混淆

Question

所以我尝试使用 Bootstrap 选项卡系统来显示使用 DataTables 形成的各种表格。这一切都有效，除了 thead 的大小在我切换标签时搞砸了。

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 的大小？奇怪的是，第一个选项卡完全可以正常工作，但其余选项卡却不行。

Answer 1

选项卡可能会导致一些不稳定的 css 行为。我对我的元素所做的是在每次单击选项卡时重置 css。下面的示例适用于您的示例，但您可能希望在 css apply 上比在所有表上更具体。

$('#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);    

        });