14

I am not sure if I am repeating the question if yes guide to the right place :)

I am using Data table and trying to implement Horizontal Scrolling and found this link

http://www.datatables.net/examples/basic_init/scroll_x.html

i used these properties in my Data Table code and am having issues in UI.

My data got the horizontal scroll bar but my columns didn't expand and not working as expected.i got additional empty column below my normal column.

Basically my UI is messed up. i saw a old thread discussion on the same!

DataTables fixed headers misaligned with columns in wide tables

Are these issues fixed now any solutions ?

================================

Adding sample code

$("#results").dataTable({
    "aaData": [
        //My data
    ],
    "aoColumns": [
        //My Columns
    ],
    "bPaginate": true,
    "bSort": true,
    "bFilter": false,
    "bJQueryUI": false,
    "bProcessing": true,
    "sScrollX": "100%",
    "sScrollXInner": "110%",
    "bScrollCollapse": true
});
Community
  • 1
  • 1
user2067567
  • 3,695
  • 15
  • 49
  • 77
  • added sample code. am not setting any explicit width for columns – user2067567 Apr 18 '13 at 07:50
  • There is nothing wrong in *what you have posted*. So, something else is the cause. Also, have you checked if you really need `"sScrollXInner": "110%"`? Check the note about this property: *Note also that sScrollXInner is used here to force the table to be wider than is strictly needed. You may or may not want to include this parameter depending on your application.* – Majid Fouladpour Apr 18 '13 at 07:59
  • what happens is if i add sScrollX it adds a extra empty column to my table? – user2067567 Apr 18 '13 at 08:01

1 Answers1

26

I had a similar issue, but solved it in a different way.

I modified the sDom parameter to wrap the table in an extra div:

sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>',

I then applied the following styles to the .datatable-scroll class:

/**
 * Makes the table have horizontal scroll bar if its too wide for its container
 */
.datatable-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

http://datatables.net/usage/options#sDom

Petah
  • 45,477
  • 28
  • 157
  • 213
  • 1
    Your solution is awesome. I have been testing many many solutions to deal with the Scroll head and body alignement issue but nothing worked in all browsers. This solution is perfect, crossbrowser and doesnt overload javascript with more hack calls. (I am editting your answer to add a bit more info with another example). Thank you so much! :) – xtrm Jul 25 '13 at 07:53
  • Best answer found so far after a tiresome research on the internet for scroll. But, you may like to add **float: left; width: your-valuepx; position: relative;** in .datatable-scroll class so as to be compatible with IE7 & IE8 browsers. Because I had to add these values. Moreover, If you only need Horizontal scroll bar, you would have to use **overflow-x: scroll; overflow-y: hidden;** otherwise it will give side effects in IE. Anyways, thanks a lot buddy!! – Gurminder Singh Mar 02 '15 at 10:43