Datatables.net ScrollX | Header and Data column width issues

Forget about scrollX, use the solution proposed on this question:

Header columns misaligned with DataTable when scrollX is enabled

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

I dont know about misalignment, but using scrollX: true makes the table not fill its container. To avoid this, set style="width:100%" in your table Datatables Flexible table width

Another solution is wrapping your .table in .table-responsive Bootstrap Responsive tables

I hope this helps someone.