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是预定义的，所以我认为这就是问题所在。如何在thead cells电话后使用javascript调整DataTable的大小？奇怪的是，第一个选项卡完全正常，但其余选项没有。

Answer 1

标签可能会导致一些不稳定的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);    

        });

与表大小混乱的Bootstrap选项卡

1 个答案: