Scroll issue in Jquery DataTable

Question

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

Answer 1

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