数据库和不需要的水平滚动条的问题 [英] 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.

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

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屋！