Complex Header with datatables

0
votes

I am using a datatable FixedHeader extension without scrolling. Columns of complex header (header with rowspan and colspan) do not align properly. See pictures and codepen example.

Pictures

$(document).ready(function() {
  $('#example').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
    "searching": false,
     fixedHeader: {
     header: true,
     footer: true
     },
   });
 });

Any ideas on how to fix this?

Codepen example

1
datatables

1 Answers

0
votes

Please give colum width for each cols. That will solve the issue.

<colgroup>
   <col width="20%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
</colgroup>