Twitter-Bootstrap 3.3.1 - 数据表总是水平滚动的答案

【问题标题】：Twitter-Bootstrap 3.3.1 - DataTables always horizontal scrollableTwitter-Bootstrap 3.3.1 - 数据表总是水平滚动的
【发布时间】：2014-12-16 15:19:09
【问题描述】：

我刚刚从 Bootstrap 3.2.0 更新到 Bootstrap 3.3.1。我也在使用DataTables-Plugin，因此我分别使用了dataTables.bootstrap.css 和dataTables.bootstrap.js。

到目前为止，我在 3.2.0 版本中没有任何问题。在 3.3.1 版本中，所有表格都可以在水平方向略微滚动（见屏幕截图）。

我在<div class="table-responsive"> 标记中找到了表格。所以通常情况下，水平滚动条应该显示在较小的屏幕上，但不是默认显示。

有什么想法吗？

【问题讨论】：

使用 firebug 来查看哪个元素有 css 溢出：滚动
在 3.3.1 版本中，我找到了 .table-responsive {min-height: .01%; overflow-x: auto;}。有趣的是，这不是任何@media-selector 的一部分。当我删除 overflow-x 时，它可以工作。在 3.2.0 版本中，我没有找到提到的选择器。谢谢你的提示。
没问题，很高兴能帮上忙
不幸的是，这并不能真正解决问题，因为当您调整窗口大小时滚动条会丢失。但是，当激活较低的媒体查询时，它会重新出现。

标签： css twitter-bootstrap datatables jquery-datatables

【解决方案1】：

这对我有用

在 Bootstrap v3.3.4 bootstrap.min.css .table-responsive {min-height: .01%;溢出-x：自动；} 导致问题因此，不要更改引导核心 css 文件（不推荐）

我在自定义 css 文件中编辑以下代码行以覆盖引导 css

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

这将解决问题。

【讨论】：

【解决方案2】：

DataTables 生成的表已配置为响应式。因此，您无需将它们包含在引导程序“表格响应”的 div 中。

您的代码可能如下所示：

    <div class="table-responsive">
        <table class="table" id="myTable">
            .... blah blah ...
        </table>
    </div>

然后稍后在 javascript 中将其设为响应式 DataTables 表：

$('#myTable').DataTable({ responsive: true });

这是多余的，会导致额外的滚动条。只需删除表格响应 div。

【讨论】：

数据表响应能力是工作表。做responsive:true 不起作用

【解决方案3】：

任何答案都对我有用。

我可以在表格中添加一个 width="100% !important" 来修复它。

.table-responsive table{
    width: 100% !important;
}

【讨论】：

【解决方案4】：

我确实需要用于移动网络响应的表格响应类。所以，我所做的就是用 @media 创建一个 CSS 类，就像这样：

@media only screen and (min-width: 968px) {
/* disable responsive in desktop */
.disable-in-desktop {
  overflow-x: inherit;
}

}

然后我调用table-responsive旁边的.disable-in-desktop，所以它看起来像：

            <div class="table-responsive disable-in-desktop">

结论：现在，响应类只能在移动屏幕上工作，因为我在桌面屏幕上禁用了它。所以水平滚动不再发生。抱歉英语不好。

【讨论】：

【解决方案5】：

把这个放在你的custom.css中，当是autoflow-x时，数据表自动生成.row会影响滚动条..

#example_wrapper .row{
    margin-right:0px;
    margin-left:-15px;  
}

【讨论】：