Datatables header misalignment

Issue when the table header columns are not fully aligned with the table body columns using datatables.net This can occur when the table is located within a modal window. Use either the CSS or JQuery methods below.
CSS • JavaScript • JQuery

Add the following CSS

.dataTables_scrollHeadInner{  width:100% !important; }
.dataTables_scrollHeadInner table{  width:100% !important; }

or use the following JQuery code to re-adjust the column widths upon opening your modal

$('#tableid').DataTable().columns.adjust();

Written by https://stackoverflow.com/questions/43837055/datatables-header-misalignment

Posted by fbrefere001 on Friday May 31, 2019