我正在使用DataTables和Bootstrap,但是无论我有多少列,我的表上总是会看到一点点x溢出。截屏:

css - 具有Bootstrap表响应功能的DataTable始终具有较小的x溢出-LMLPHP

我的标记:

<div class="table-responsive">
    <table class="table data-table">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

我没有对data-table类应用任何样式,并且tabletable-responsive类都是Bootstrap的。

我的初始化代码:
$('.data-table').DataTable();

如何消除这种不必要的X滚动?我只希望在屏幕小得多且列显然不合适的情况下使用它。

最佳答案

解决方案

您需要使用container。将标记标记为divcontainer类的container-fluid

<div class="container-fluid">
    <div class="table-responsive">
        <table class="table data-table">
            <thead>
                ...
            </thead>
            <tbody>
                ...
            </tbody>
        </table>
    </div>
</div>

还要添加以下CSS规则:

.table-responsive {
   overflow-x: inherit;
}

演示

有关代码和演示,请参见this jsFiddle

关于css - 具有Bootstrap表响应功能的DataTable始终具有较小的x溢出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33808714/

10-12 12:38
查看更多