Question

我正在尝试将DataTable与Twitter引导程序选项卡一起使用，为此我正在尝试使用代码，它成功调用dataTable并创建dataTable但是对于tab2 DataTable标头却出现了错误对齐

 <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标头时，取消对齐

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);
});

数据表标头未在引导选项卡中对齐

1 个答案: