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 on Google Chrome. This was the fix:

.dataTable(
{
  "processing": false,
  "serverSide": false,
  "autoWidth": true,
  "columnDefs": [
    {"orderable": false, "targets": [5, 6]}
  ],
  "order": [1, 'asc'],
  "dom": 'l<"toolbar">frtip',
  drawCallback: function () { // this gets rid of duplicate headers
      $('.dataTables_scrollBody thead tr').css({ display: 'none' }); 
  },
  scrollY: '65vh',
  scrollCollapse: true,
  paging: false
});

Answer 2

The solution was simple in my case. Just include this on your css:

/* Override sorting header --> DataTable Bug */
.dataTables_scrollBody > table > thead > tr {
    visibility: collapse;
    height: 0px !important;
}

Answer 3

This hides the second header and removes the white space between the header and body.

<style>
     .dataTables_scrollBody thead tr {
         visibility: collapse;
     }

     .dataTables_scrollBody {
         margin-top: -10px;
      }
</style>

Answer 4

The best way is to use

dataTable.columns.adjust();

on init/draw callback