Problems with Datatables and unwanted Horizontal scrollbar

Question

Im hoping this is a fairly simple problem.

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

The styles for the page are fairly straight forward

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

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/

Answer 2

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

this worked for me for all of my tables. This was also only an issue with firefox and IE, chrome handled it just fine to begin with.

Answer 3

You can just add overflow-x: hidden; to the .dataTables_scrollBody if you can't find something that fixes it natively in the script. Unfortunately, you'll probably also need to use !important to raise its specificity higher than the inline styles applied to the element already.

http://jsfiddle.net/SombreErmine/FBpLA/12/

Answer 4

You can use the css tag overflow-x:hidden; to remove the horizontal scrollbar on the table with id mytable2.

#mytable2 
{    
  overflow-y:scroll;
  overflow-x:hidden; 
}

However, if you use table-layout:fixed this won't work, a majority of the browsers will treat the overflow in their naturual behaviour rather than watching the css.

Some info on table-layout:fixed by Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Example fiddle: http://jsfiddle.net/FBpLA/9/