Reading Time: 2 minutes

5,296 Views

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Inside this article we will fix an issue related with DataTable header. I wrote this article after a deep research. DataTable issue like jQuery Datatables Header Misaligned With Vertical Scrolling.

Learn More –

Let’s get started.

What is Issue with DataTable here?

We have successfully integrated the DataTable plugin to application. It’s working perfect.

Now, when we added few properties of DataTable like

scrollY: "..."
scrollCollapse: true,
...

Table header is now not responsive any more. When we change the screen resolution, tbody is adjusting it’s format according to that but thead is not doing the same. Seems like it is fixed.

Due to vertical scrolling, header get misaligned.

Fix – Header Misaligned With Vertical Scrolling

Here, is the solution you can do with the same issue what we discussed above –

var table = $("#myTable").DataTable({
             "scrollY": "150px",
             //…
});

$(window).resize( function () { 
        table.columns.adjust();
});

We hope this article helped you to learn jQuery Datatables Header Misaligned With Vertical Scrolling in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.