Datatables: Header misaligned with table body when scrolling to the right on reload

I have a datatable which works absolutely fine on page load. It has a horizontal scrollbar as the table width is very large and my first 3 columns are fixed. However, when I refresh the page, and I scroll to the right at the very end, the table header stays fixed and the table body alignment moves to the left such that they are no longer aligned. I removed the left-padding of 17px btw.

Here is the code:

 $(document).ready(function () {
    $('#tblEvents').DataTable({
        destroy: true,
        "scrollX": true,
        "scrollY": "600px",
        "scrollCollapse": true,
        "pageLength": 5,
        fixedColumns: {
            leftColumns: 3
        },
   });

Please help n thanks 🙂