Duplicate empty header occurs in datatable when scrollX or scrollY is enabled when using Google Chrome

Question

I have a date in my program. And I want it to scroll horizontally, so I did the following:

var tableI = $('#table_data').DataTable({ "bLengthChange": false, "scrollX": true, "dom": 'frtp' }); 

It turned out like this (as a sample):

He doubled the headline. How do I fix this?

EDIT: Here is another example:

here is my HTML code:

 <table class="table table-striped" id="act_data" width="100%"> <div style="float:left;width:385px" > <button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button> <button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button> <!-- <button type="button" id="refresh" class="btn btn-link" data-target="#DeAcc"><span class="fa fa-refresh"></span></button>--> <a href="<?php echo site_url('admin/homeAdmin/homepage')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a> </div><thead class="header"> <tr class="well"> <th style="font-size: 14px;">Employee ID#</th> <th style="font-size: 14px;">Username</th> <th style="font-size: 14px;">Account Type</th> <th style="font-size: 14px;">Status</th> </tr> </thead> <tbody> <?php if($result != NULL){?> <?php foreach($result as $row){ ?> <tr> <td style="font-size: 15px;padding-left: 20px;"> <?php echo $row->employeeID;?> <input type="hidden" name="userID" id="userID" value="<?php echo $row->userID;?>" /> <input type="hidden" name="pass" id="pass" value="<?php echo $row->password;?>" /> </td> <td style="font-size: 15px;padding-left: 20px;"> <?php echo $row->username;?> </td> <td style="font-size: 15px;padding-left: 20px;"> <?php echo $row->usertype;?> </td> <td style="font-size: 15px;padding-left: 20px;"> <?php echo $row->status; ?> </td> </tr> <?php }?> <?php }?> </tbody> </table> 

Answer 1

I had the same issue with the version of Firefox and Firefox. The main reason is that when we set scrollX:true , the datatable adds an extra div with the table and title inside, except for the table and title already built. This is done to scroll through the effect of the table.

Datatable, trying to set the height to 0px to hide it. Some browsers do not interpret this correctly.

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

To hide it, changing the style from this line to “hidden” will violate the structure of the table. A working solution would be to have visibility:'collapse'

Data configuration example:

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

since this is a table, we need visibility: “collapse”, not visibility: “hidden” - more information about the visibility css property

Answer 2

Solution 1:

To make "scrollXInner": true please use "scrollXInner": true Avoid 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 3

I had the same issue on Google Chrome. This was a 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 4

Good explanation of Sairam. It would be better to use only CSS

 div.dataTables_scrollBody thead { display: none; } 

Answer 5

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

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

Answer 6

Try something like this:

"scrollX": '100%',

"scrollXInner": '125%',

Answer 7

This worked for me:

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

Link: geam March 2015 answer on the datatables.net forum

Answer 8

The best way is to use

 dataTable.columns.adjust(); 

on callback init / draw

Answer 9

You can use the following code in your CSS:

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