数据表和不需要的水平滚动条的问题 [英] Problems with Datatables and unwanted Horizontal scrollbar

问题描述

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

Im hoping this is a fairly simple problem.

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

Im trying to use Datatables to create a table without any horizontal scrolling. The table has some long data rows which I need to keep on one line and hide the overflow.

这似乎是我缺少一些相当基本的datatables这里，但

It seems like I'm missing something fairly basic with datatables here, but I can't seem to get rid of the horizontal scrollbar when the table gets a vertical scrollbar.

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

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

There are two tables (identical data), both are initialised very simply.

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

推荐答案

是将内表的宽度设置为：

In the end the best solution was to set the width of the inner table to:

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

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

All solutions listed here had undesirable cropping behavior. Limiting the table width in this way also allowed me to dynamically adjust the height of the table such that the horizontal scrollbar can appear or disappear on demand without introducing an horizontal scroll.

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

这篇关于数据表和不需要的水平滚动条的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！