数据表问题和不需要的水平滚动条

Posted 2023-05-07

【中文标题】数据表问题和不需要的水平滚动条

【英文标题】：Problems with Datatables and unwanted Horizontal scrollbar

【发布时间】：2014-05-21 22:00:27

【问题描述】：

我希望这是一个相当简单的问题。

我正在尝试使用 Datatables 创建一个没有任何水平滚动的表格。该表有一些长数据行，我需要将它们保留在一行并隐藏溢出。

这里的数据表似乎缺少一些相当基本的东西，但是当表格获得垂直滚动条时，我似乎无法摆脱水平滚动条。

http://jsfiddle.net/FBpLA/3/

有两个表（相同的数据），都非常简单地初始化。

$('#mytable').dataTable(
    bFilter: false,
    bInfo: false,
    bPaginate: false,
);

$('#mytable2').dataTable(
    bFilter: false,
    bInfo: false,
    bPaginate: false,
    sScrollY: '150px'
);

页面的样式相当简单

body 
     height:100%;
     color: #000000;
     font-family: Helvetica, Arial, Verdana, sans-serif;
     font-size: 10pt;
     background-color: #B4D4EC;
 
 .main-panel 
     display:block;
     background:white;
     padding:20px;
     height: 100%;
     position:absolute;
     width: 700px;
     top: 139px;
     bottom: 110px;
 
 th 
     text-align:left;
 
 td 
     border-spacing:0;
     white-space:nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     -ms-text-overflow:ellipsis;
 

【参考方案1】：

最后最好的解决方案是将内表的宽度设置为：

table-layout:fixed;
width: 98% !important; 

此处列出的所有解决方案都存在不良裁剪行为。以这种方式限制表格宽度还允许我动态调整表格的高度，以便水平滚动条可以按需出现或消失，而无需引入水平滚动。

http://jsfiddle.net/FBpLA/15/

【讨论】：

我在我的 DOM 中找不到类 dataTables_scrollBody 的元素（使用带有响应扩展的 DataTables）；我将您的样式应用到了 dataTable 类，它起作用了。

【参考方案2】：

.dataTables_scrollBody

 overflow-x:hidden !important;
 overflow-y:auto !important;

这对我所有的桌子都有效。 这也只是firefox和IE的问题，chrome一开始就处理得很好。

【讨论】：

工作正常；不需要溢出-y。 +1

【参考方案3】：

如果您在脚本中找不到本地修复它的内容，您可以将overflow-x: hidden; 添加到.dataTables_scrollBody。不幸的是，您可能还需要使用!important 来提高其特异性，使其高于已应用于元素的内联样式。

http://jsfiddle.net/SombreErmine/FBpLA/12/

【讨论】：

我要补充一点，我发现执行此操作的最佳位置是在脚本随附的 dataTables.css 文件中。我花了很多时间试图弄清楚为什么在某些浏览器中会出现滚动包装，而在其他浏览器中却没有。我最终使用了它，到目前为止我还没有看到任何不良副作用。

【参考方案4】：

您可以使用css标签overflow-x:hidden;来移除id为mytable2的表格上的水平滚动条。

#mytable2 
    
  overflow-y:scroll;
  overflow-x:hidden; 

但是，如果您使用 table-layout:fixed 这将不起作用，大多数浏览器将在其自然行为中处理溢出而不是查看 css。

Mozilla 关于table-layout:fixed 的一些信息：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

小提琴示例：http://jsfiddle.net/FBpLA/9/

【参考方案5】：

Datatables 默认计算表格的宽度并将其作为内联样式应用于表格元素（这称为autoWidth）。因此，您可能在强制表格尊重您提供的任何宽度设置而不禁用此设置时遇到问题。 （请参阅here。）在表格设置中设置autoWidth: false 以禁用它。

然后您可以将宽度样式应用于dataTables_scrollBody 或表格。例如：

.dataTables_scrollBody 
    width: 98%

这应该可以防止因禁用水平滚动而导致的任何裁剪，同时确保内联宽度不会弄乱您提供的设置。你也可以避免使用!important。

【参考方案6】：

在初始化表格之前，您必须编辑 css 属性 od 包含表格标签。

$('.table-div-container').css('overflow-x': 'hidden','border': 'none');

【参考方案7】：

其实这段代码对我有用...你看看

.table-responsive 
min-height: .01%;
overflow-x: hidden;