Question

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

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

似乎我在这里遗漏了一些相当基本的数据表，但是当表格得到垂直滚动条时，我似乎无法摆脱水平滚动条。

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

$('#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;
 }

Answer 1

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

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

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

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

Answer 2

.dataTables_scrollBody
{
 overflow-x:hidden !important;
 overflow-y:auto !important;
}

这适用于我所有的桌子。这也只是firefox和IE的一个问题，chrome处理起来就好了。

Answer 3

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

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

Answer 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/

Answer 5

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

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

.dataTables_scrollBody {
    width: 98%
}

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

Answer 6

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

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

Answer 7

实际上，这段代码对我有用...首先看看

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

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

7 个答案: