dataTable Headers Misaligned

Question

OK All, I have a similar situation to a lot of questions in the exchange, but I still have not found the solution, and it seems nothing works. First, an explanation: I an using a dataTable inside a collapsible accordion control. HTML is below.

<div class="row">
  <div class="col-lg-12">
    <table width="100%" class="table table-striped table-bordered table-hover" id="sTable">
      <thead>
        <tr>
          <th>
            <center><button type="button" title="Delete All" onclick="delAll();" class='btn btn-danger btn-sm btn-inline'><i class="fa fa-trash-o fa-1x"></i></button></center>
          </th>
          <th>Slot Number</th>
          <th>Date</th>
          <th>Time</th>
          <th>Flight</th>
          <th>Location</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd gradeX">
          <td align="center">
            <button type="button" title="Delete" onclick="del();" class='btn btn-danger btn-sm btn-inline'><i class="fa fa-trash-o fa-1x"></i></button>
          </td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
          <td><%=value%></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

and I have the following jscript at the bottom of the code:

$('#sTable').DataTable( {
  scrollY: "250px",
  scrollCollapse: true,
  paging: false,
  info: true,
  searching: false,
  ordering: false
});

no matter what I do - I cannot get the headers to align with the body. However, when I "adjust" the browser screen in any way, they align!?!?

Ideas? I have tried everything in StackExchange that already was noted as an answer...to no avail.

Thanx in Advance!

Answer 1

Sasang

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,

I think you might have the same issue with the collapsible accordion control, Just try to call columns().adjust() on the open event

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();
    }
  });
})

Please refer to this link for more info.

Datatables header misalignment