Problems with Datatables and unwanted Horizontal scrollbar

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/

.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.

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/