CODEWITHSUNDEEP
jquerycssdatatables
Monzingo
Monzingo

Reputation: 411

Jquery Data table Fixed Header Not aligned

I've noticed that a lot of the issues on jquery data tables have to do with horizontal scrolling and misalignment of headers. My issue is different. I do not have horizontal scrolling, but my header doesn't align on page load. See image below.

enter image description here

It looks like each header varies based off of the length of text in the box. Before adding the fixed header, everything was aligned. Im wondering if anyone hasd experienced this and if so, how did you work around it?

Upvotes: 1

Views: 5607

Answers (3)

Ravi Hirani
Ravi Hirani

Reputation: 6539

Write,

$(".dataTables_scrollBody").width($(".dataTables_scrollHead").width());

Note:- I hope you have written "scrollX": true If not then please write this line. It will enable horizontal scrollbar.

Upvotes: 0

Monzingo
Monzingo

Reputation: 411

I was able to fix this by downloading the package through NPM and then applying the fixedHeader attribute to true on tale initialization

Upvotes: 0

Gyrocode.com
Gyrocode.com

Reputation: 58930

See if calling fixedHeader.adjust() will solve it. For example:

$('#example').DataTable({
   'drawCallback': function( settings ) {
      var api = this.api();
      api.fixedHeader.adjust();
   }
});

It looks like you're displaying custom controls in the table and they may be initialized after jQuery DataTables calculates width of headings.

Upvotes: 1

Related Questions