Bootstrap 4 DataTable表头与tbody首次加载对齐异常求助

Hey, I’ve run into this exact issue before! That weird misalignment that fixes itself when you click pagination or open DevTools is almost always due to DataTables calculating column widths before the table’s container has fully rendered or settled into its final size. Here are a few tested solutions that should work for you:

1. Delay the Column Adjustment #

Sometimes the DOM isn’t fully painted when DataTables initializes, so adding a tiny delay lets everything settle before recalculating widths. Try wrapping your columns.adjust() call in a setTimeout or requestAnimationFrame:

$(document).ready(function () {
  var table = $('#dtBasicExample').DataTable({
    // Your existing config here
    "stateSave": true,
    "responsive": true,
    "ordering": true,
    "pagingType" : "simple_numbers",
    "lengthChange": true,
    "fnInitComplete": function () {
      var myCustomScrollbar = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollBody');
    },
    "scrollY": 620,
    "scrollX": true,
    "scroller": { "rowHeight": 30 },
    "scrollCollapse": true,
    "deferRender": true,
    "lengthMenu": [[10,25,50,100,-1],[10,25,50,100,"All"]],
    "language": { 
      "zeroRecords" : "No Records were found", 
      "lengthMenu": "_MENU_" 
    }
  });

  table.column(0).visible(false);

  // Add this delay
  setTimeout(() => {
    table.columns.adjust().draw();
  }, 100); // 100ms is usually enough, adjust if needed
});

Or use requestAnimationFrame for a more precise timing (triggers after the next repaint):

requestAnimationFrame(() => {
  table.columns.adjust().draw();
});

2. Initialize After Window Load Completes #

$(document).ready() fires when the DOM is ready, but not necessarily when all assets (images, stylesheets) are fully loaded. Switching to $(window).load() ensures everything is rendered before setting up DataTables:

$(window).load(function() {
  var table = $('#dtBasicExample').DataTable({
    // Your full config here
  });

  table.column(0).visible(false);
  table.columns.adjust().draw();
});

3. Manually Sync Scroll Head Width with Scroll Body #

If the scrollable header’s width is miscalculated, you can force it to match the scroll body’s width in the fnInitComplete callback:

$(document).ready(function () {
  var table = $('#dtBasicExample').DataTable({
    // Your existing config
    "fnInitComplete": function (settings) {
      var tableApi = this.api();
      var scrollHead = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollHead');
      var scrollBody = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollBody');
      
      // Force header width to match body
      scrollHead.style.width = scrollBody.offsetWidth + 'px';
      // Adjust columns again
      tableApi.columns.adjust().draw();
    }
  });

  table.column(0).visible(false);
});

4. Adjust Columns After Data Load (if using AJAX) #

If your table loads data asynchronously, make sure to trigger the adjustment after the data is fully loaded using initComplete:

var table = $('#dtBasicExample').DataTable({
  // Your config
  "ajax": "your-data-source-url",
  "initComplete": function(settings, json) {
    this.api().columns.adjust().draw();
  }
});

Start with the first solution—it’s the simplest and works for most cases. If that doesn’t fix it, try the others one by one.

内容的提问来源于stack exchange，提问作者NewbieKid