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

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;
 }

原文由 Dunderklumpen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 Dunderklumpen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 bjack 发布，翻译遵循 CC BY-SA 3.0 许可协议