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

Question

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

我试图使用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;
 }

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/