Datatables header misalignment

Question

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>

Answer 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>

Answer 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.

Answer 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>

Answer 4

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

table.columns.adjust();