Tengo una página que tiene tres pestañas de arranque y una tabla de datos en cada pestaña. La tabla de datos en la primera pestaña funciona bien. Sin embargo, la tabla de datos en la segunda pestaña es de medio ancho y no tengo idea de por qué. Tampoco se aplica CSS.

Aquí hay una captura de pantalla de la primera pestaña (funciona bien)

Y la segunda pestaña (tabla de datos a medio ancho)

Mi código:

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


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

Mi 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>

Alguien puede ayudar?