jquery – 数据表在引导选项卡中的大小不正确

我有一个页面,每个选项卡中有三个引导选项卡和一个数据表.第一个选项卡中的数据表工作正常.但是,第二个选项卡中的数据表是半宽的,我不知道为什么.也没有适用于它的CSs.

这是第一个标签的截图(工作正常)

第二个标签(半宽数据)

我的代码：

$('#companies').DataTable({ //table in tab 1 (works finE)
        responsive: true
});


$('#companies2').DataTable({ //table in tab 2
        responsive: true
});

我的HTML：

<!-- tab start -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Tabs</h1>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>

            <!-- tab sections -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <table id="companies" class="table table-Striped table-bordered dt-responsive Nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Company Name</th>
                                <th>Status</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each context}}
                            {{#if setup}}
                            <tr>
                                <td>{{Company_iD}}</td>
                                <td>{{Company_namE}}</td>
                                {{#if is_approveD}}
                                <td>Approved</td>
                                {{elsE}}
                                <td>Not Approved</td>
                                {{/if}}
                                <td><a href="/admin/viewclientorders/{{Company_iD}}">View orders</a></td>
                                <td><a href="/admin/company/{{Company_iD}}">View Details</a></td>
                            </tr>
                            {{/if}}
                            {{/each}}
                        </tbody>
                    </table> 
                </div>
                <div class="tab-pane" id="tab2">
                    <table id="companies2" class="table table-Striped table-bordered dt-responsive Nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Company Name</th>
                                <th>Create Date</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each context}}
                            {{#unless setup}}
                            <tr>
                                <td>{{Company_iD}}</td>
                                <td>{{Company_namE}}</td>
                                <td>{{Created_at}}</td>
                                <td><button class="btn btn-priMary setup"><a href="/admin/companies/setup_company/{{Company_iD}}">Setup</a></button></td>
                                <td><button class="btn btn-danger delete">Ignore</button></td>
                            </tr>
                            {{/unless}}
                            {{/each}}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane" id="tab3">
                    3rd
                </div>

            </div>

有人可以帮忙吗？

var companies2 = $('#companies2').DataTable({
  responsive: true
})

$('a[data-toggle="tab"]').on('shown.bs.tab',function(E) {
  if (e.target.hash == '#tab2') {
    companies2.columns.adjust().draw()
  }
})