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

You can use Following code in your CSS:

div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }

Answer 2

Good explanation by Sairam. Better way would be to use just a CSS

div.dataTables_scrollBody thead {           
    display: none;
}

Answer 3

Solution 1 :

To Resolve This Please Use "scrollXInner": true Avoid to Using "scrollX": true"

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
    "scrollX": true, //Do Not Use This (Remove This Line)
    "scrollXInner": true //Use This (Add This Line)
     "dom": 'frtp'
});

Solution 2 :

OR You Can Add This CSS

.dataTables_scrollBody thead tr[role="row"]{
    visibility: collapse !important;
}

Answer 4

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.

<tr style="height: 0px;" role="row"> 

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

Answer 5

Try something like this:

"scrollX": '100%',

"scrollXInner": '125%',

Answer 6

This worked for me:

$('#DataTables_Table_0').on( 'draw.dt' function() {
    $('.dataTables_scrollBody thead tr').addClass('hidden')
}

Reference: geam's March 2015 answer on datatables.net forum