具有Bootstrap响应表的DataTables总是具有小的x溢出

Question

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

我的加价:

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

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

我的初始化代码:

$('.data-table').DataTable();

如何消除这种不必要的x滚动？我希望它仅在屏幕小得多且列显然不适合时使用.

Answer 1

解

您需要使用一个容器。将您的标记包裹在divwith类container或中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;
}

演示

有关代码和演示，请参见此jsFiddle。

Answer 2

在x-scroll由于发生.table-responsive类与数据表插件的组合

该.table-responsive班的需求是在表的父元素。在查看 HTML 部分时确实如此，但在插件初始化后就不是这样了，因为 DataTables 添加了很多额外的标记。

一种解决方法是.table-responsive在您的 HTML 中省略该类，并在插件初始化后使用 jQuery 添加它。

HTML：

<div class="container-fluid">
    <table id="example" class="table" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        ...
    </table>
</div>

JavaScript：

$(document).ready(function () {
    var table = $('#example').DataTable();
    $('#example').parent().addClass('table-responsive');
});

这是一个 jsfiddle。非常感谢@Gyrocode.com在他的回答中提供了原始的 jsfiddle！