css - 带有 Bootstrap 表响应的 DataTables 总是有小的 x 溢出

Question

我正在使用 DataTables 和 Bootstrap，但无论我有多少列，我的表上总是会出现一点 x-overflow。截图:

我的标记:

<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

解决方案

您需要使用 container .使用 container 或 container-fluid 类将您的标记包装在 div 中。

<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用于代码和演示。