In my jQuery datatables, thead and tbody are not aligned

/*function loadDynamicTable(axis, value, data) {
  $.ajax({
    url: '@Url.Action("GetDynamicTableData", "Admin")',
    data: {
      'axis': axis,
      'value': value,
      'data': data
    },
    type: 'GET',
    success: function(response) {
      if (response.success) {
        if ($.fn.DataTable.isDataTable('#dynamicTable')) {
          dataTable.destroy();
        }
        */
const response = {
  headers: ["Total", "Jul 22", "Aug 22", "Sep 22", "Oct 22", "Nov 22", "Dec 22", "Jan 23", "Feb 23", "Mar 23", "Apr 23", "Jun 23"],
  data: [[123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789,123456789,123456789],[123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789, 123456789,123456789,123456789]]
}
$("#tableHeader").empty();
$("#tableBody").empty();

response.headers.forEach(function(header) {
  $('#tableHeader').append('<th class="middle center white">' + header + '</th>');
});

let grandTotalRow = null;
let tableBodyHtml = "";

response.data.forEach(function(row) {
  var rowHtml = '<tr>';
  row.forEach(function(cell, index) {
    if (index === 0) {
      cell = cell === "Period Total" ? "Grand Total" : cell;
      rowHtml += '<td>' + cell + '</td>';
    } else {
      rowHtml += '<td class="text-right">' + Number(cell).toFixed(2) + '</td>';
    }
  });

  rowHtml += '</tr>';

  if (row[0] === "Grand Total") {
    grandTotalRow = rowHtml;
  } else {
    tableBodyHtml += rowHtml;
  }
});

$("#tableBody").html(tableBodyHtml);

if (grandTotalRow) {
  $("#tableBody").append(grandTotalRow);
}

dataTable = $('#dynamicTable').DataTable({
  destroy: true,
  responsive: false,
  scrollX: true,
  paging: false,
  searching: false,
  ordering: true,
  autoWidth: false,
  info: false,
  order: [],
  drawCallback: function() {
    var api = this.api();
    var rows = api.rows().nodes();

    $(rows).each(function() {
      if ($(this).find("td:first").text().trim() === "Grand Total") {
        $(this).appendTo("#tableBody");
        $(this).addClass("grand-total-row");
      }
    });
  }
});
/*          

      } else {
        alert(response.message);
      }
    },
    error: function() {
      alert('Error fetching data.');
    }
  });
}*/

#tableBody tr:last-child td {
  font-weight: bold;
  background-color: #d9edf7;
}

#dynamicTable td:nth-child(2),
#dynamicTable th:nth-child(2) {
  background-color: #d9edf7;
}

.text-right {
  text-align: right;
}

.grand-total-row td:first-child {
  background-color: transparent !important;
  /*font-weight: normal !important;*/
}

.grand-total-row td:nth-child(2) {
  background-color: #1a75ff !important;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" />
<div id="records" style="margin: 10px; margin-left: 10px; border: 2px solid #ddd;border-radius: 5px;box-shadow: 3px 3px #e9ecef">
  <table id="dynamicTable" class="display nowrap table table-striped table-bordered table-hover table-checkable order-column" style="width:100%">
    <thead>
      <tr id="tableHeader" class="navbar-lightblue"></tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>
</div>