Duplicate empty header occur in datatable when enabling scrollX or scrollY when using Google Chrome

Question

I have a datatable in my program. And I want it to be scrollable horizontally so what I did was like this:

var tableI = $(\'#table_data\').DataTable({
    \"bLe         


        

Answer 1

I had the same issue with firefox & firefox developer edition. The root cause is, when we set scrollX:true, datatable adds an additional div with a table and a header inside, apart from the table & header already constructed. This is to get the scrolling within table effect.

Datatable, tries to set the height to 0px, to hide it. Some browsers don't interpret this properly.

To hide it, changing the style to this row to 'hidden' will break the structure of the table. The working solution would be, to have visibility:'collapse'

Sample datatable configuration:

tableElement.DataTable({
    "scrollX": true,
    "initComplete": function(settings, json) {
        $('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
    }
    //other datatable configurations...  
});

since it's a table, we need to have visibility:'collapse' and not visibility:'hidden' - more info on visibility css property