'Datatables header misalignment

The picture below shows the header of the datatable misalignment before you click on the textbox (search/filter..). once the latter becomes in focus, the header aligns again. I noticed that when scrollY is off the header is fine, i need it on. any idea how to fix it. in the following snippets, just change the paging option and you can see the realignment of the header again.

$('#RegSrc').DataTable({
   dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>",
            select: true,
            scrollY: 200,
            deferRender: true,
            //scrollY:     500,
            responsive: false,
            fixedHeader: {
                header: true,
                footer: true
            },
            "processing": true,
            "serverSide": false,
            bAutoWidth: true,
            data: [],
            rowCallback: function (row, data) { },
  });

$("#btn").click(function() {
  $("#mdl").dockmodal();
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none" style="width:100%">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

jquery datatables

Solution 1:^[1]

I noticed that the reason for the misaligned table width is due to the width being explicitly set to 100px initally, instead of the correctly calculated width. This may not address the issue at hand, but a workaround is to force the table and wrapper div elements to width:100%. Doing this does work for the scenarios I tested on, but be advised it may cause issues with certain responsive behavior. The adjustment is to add the following css:

.dataTables_scrollHeadInner{
  width:100% !important;
}
.dataTables_scrollHeadInner table{
  width:100% !important;
}

UPDATE:

Ok I took a look at some similar issues, and its related to the fact that your table is displayed in a modal. The modals full view is only rendered after the datatable is set up, so there can be issues with column sizing until you force an action to redraw it, like changing the window size or selecting one of the datatable options. The solution is to call columns().adjust() on the open event of the modal, so the table is redrawn after the modal is displayed. So I went a took a look at the docs for the dockmodal library you are using. There i found that you can specify a function to be called on the open event, defined within the options for the modal. Putting this change in fixes the issue, no need for css changes. Take a look at the updated code:

var table = $('#RegSrc').DataTable({
     dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>",
     select: true,
     scrollY: 200,
     deferRender: true,
     //scrollY:     500,
     responsive: false,
     fixedHeader: {
        header: true,
        footer: true
     },
     "processing": true,
     "serverSide": false,
      bAutoWidth: true,
      data: [],
      rowCallback: function (row, data) { },
});
$("#btn").click(function() {
  $("#mdl").dockmodal({
    open : function() {
      table.columns.adjust();
    }
  });
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Solution 2:^[2]

I have tried all the solutions. I just figured out a way to solve this on my own way. First, add 100% width to datatable header.

.dataTables_scrollHeadInner{  width:100% !important; }
.dataTables_scrollHeadInner table{  width:100% !important; }

Then after all the page contents have been loaded and shown, force datatable to redraw using "order".

$(div).show();
$('#datatable').DataTable().order([0, 'asc']).draw();

By this solution, I solved issues of header not fully across the table and misaligned. Hope this helps.

Solution 3:^[3]

After wasting long time, I found the following solution works well on Chrome and Firefox. First, add the following CSS style:-

<style>
    .dataTables_scrollHeadInner {
        width:100% !important;
        padding: 0 !important;
    }
</style>

In your javascript, you can add rows at anytime:-

table.rows.add(someJson);
table.draw();

where 'table' is a global variable pointing to the datatable:-

 table = $('#datatab').DataTable({
        ...
 });

In your html, add the width="100%" to the table:-

 <table id="datatab" class="..." width="100%">
       ...
 </table>

Solution 4:^[4]

I also faced the same issue. Got fixed after using the below code.

table.columns.adjust();

Solution 5:^[5]

Another update, Instead of forcing width to 100% upon initialization, I do it on the open event of the modal, yields more consistent outcome, I added more events to manage the modal resizing events.

Thanks to Sasang

var table = $('#RegSrc').DataTable({
     dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>",
     select: true,
     scrollY: 200,
     deferRender: true,
     //scrollY:     500,
     responsive: false,
     fixedHeader: {
        header: true,
        footer: true
     },
     "processing": true,
     "serverSide": false,
      bAutoWidth: true,
       data: [{"Filenum":15090248,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418115,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418116,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170227111,"FullName":"asd dsf as a","DOB":"27 Feb 2017","Age":0},{"Filenum":15112775,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15112777,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15120996,"FullName":"marwam mohmmad  saleem","DOB":null,"Age":null},{"Filenum":160215104,"FullName":"marwam mohmmad abdul fattah Abu Maizer","DOB":"12 Mar 2016","Age":1},{"Filenum":15112270,"FullName":"mohammad j saleh raqaad","DOB":"22 Nov 2015","Age":2},{"Filenum":15112772,"FullName":"salem mohmmad john sarjes","DOB":"22 Oct 2011","Age":6}],
       "columns": [
       {
           "className": 'details-control',
           "width": "",
           "orderable": false,
           "data": null,
           "defaultContent": '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>'
       },
       { "width": "20%", data: "Filenum" },
       { "width": "30%", data: "FullName" },
       { "width": "20%", data: "DOB" },
        { "width": "20%", data: "Age" }
            ],

            order: [[1, 'asc']]
      
      
});
$("#btn").click(function() {
  $("#mdl").dockmodal({
    open : function() {
      table.columns.adjust();
      $('#RegSrc').attr("style","width:100%")
    },
     popout: function () { table.columns.adjust(); },
        restore: function () { table.columns.adjust(); },
  });
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Solution 6:^[6]

My solution was to add CSS:

.dataTables_scrollHeadInner{
    width: 100% !important;
}

And delayed columns.adjust() after loading data into the table

setTimeout(() => {resultsTable.columns.adjust()}, 50);

resultsTable is global variable DataTable

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	CincyBella
Solution 3	Wail Yousif
Solution 4	Vicky Rathee
Solution 5	Community
Solution 6	orlov_dumitru

'Datatables header misalignment

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]