javascript - 数据表标题在 Bootstrap 选项卡中未对齐

Question

我正在尝试将 DataTable 与 Twitter bootstrap Tabs 一起使用，为此我正在尝试以下代码，它成功调用 dataTable 并创建 dataTable，但对于 tab2 DataTable header 未对齐

 <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Data table 1</a>

        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Data table 2</a>

    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <table class="table" id="table1">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First table</th>
                        <th>First table</th>
                        <th>First table</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>

                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <table class="table" id="table2">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>second table</th>
                        <th>second table</th>
                        <th>second table</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

当我添加 scrollY header 时，标题未对齐

Answer 1

这是因为当您初始化并滚动 table2 时，您的第二个选项卡被隐藏。这是工作示例。 jsFiddleDemo

$("#table1").DataTable({
    "scrollY": 308,
    "paging": false,
    "responsive": true
});
$('a[href="#profile"]').one('click',function(){
    setTimeout(function(){
        $("#table2").DataTable({
            "scrollY": 308,
            "paging": false,
            "responsive": true
        });
    },0);
});