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

Question

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

我正在尝试使用 Datatables 创建一个没有任何水平滚动的表格。该表有一些长数据行，我需要将其保留在一行中并 overflow hidden 。

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

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/