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

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