Datatables fixed columns scrollbar issue

Question

I have a table on which I am using the DataTables FixedColumns plugin. I'd like for the scroll bar to resize to be only underneath the non-fixed columns, as it is in the example page here: https://datatables.net/release-datatables/extras/FixedColumns/index.html

While using the exact same code, I am unable to make this work. Based on some recommendations in the forums, I switched to the nightly builds of DataTables and FixedColumns, but that has not gotten me anywhere.

Illustration of the problem: http://jsfiddle.net/Ue6Gn/1/

Code:

$(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollY": "300px",
        "sScrollX": "100%",
    "sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bPaginate": false
    } );

    new $.fn.dataTable.FixedColumns( oTable );
} );

Any ideas?

Answer 1

Give a background colour to your header, in your case, give white. I faced the same issue. It worked for me.