1

//In dtOption I am giving 
   .withOption('scrollY','auto')
<table datatable dt-columns="dtColumns" dt-options="dtOptions"  style="width:100%;"></table>

But due to this, the header and remaining body are not in proper alignment. I tried various options but the issue is not fixed. Please suggest something what to do to fix that problem. I have attached the screenshot of the table. enter image description here

developer
  • 76
  • 1
  • 12
  • It appears there is a scrollbar on the right side. Why's that? That's your issue. – Kyle Krzeski Jun 19 '17 at 14:45
  • Also, please add a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – Kyle Krzeski Jun 19 '17 at 14:46
  • Sorry, I can't add any example or fiddle as it's a long project. My problem is that columns of header and table body are not in proper alignment. Like in my screenshot td of column 3 – developer Jun 19 '17 at 14:51

1 Answers1

0

A work around is:

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});
Suresh Kamrushi
  • 15,627
  • 13
  • 75
  • 90