datatable misaligned until sort in modal

Question

Cannot seem to solve this datatable header misalignment in a modal. I have tried several outlets, including the following:

dataTable Headers Misaligned

Datatables header misalignment

Here is my code (condensed as much as possible):

HTML

<head>
  <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" /> 
  <style>
  .dataTables_scrollHeadInner {
    width:100% !important;
    padding: 0 !important;
  }
  .dataTables_scrollHeadInner table {
    width:100% !important;
  }
  </style>
</head>

<body>

<button id="submitDetails">Search</button>

<div class="modal modal-default" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog-centered">
    <div class="modal-content" style="width: 100%;">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fa fa-user fa-fw"> </i> Detail Search Results</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <table id="example1" class="table table-bordered table-striped table-hover table-condensed" cellpadding="0" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>COLUMN1</th>
              <th>COLUMN2</th>
              <th>COLUMN3</th>
              // some more columns
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

</body>

JQuery:

$('#submitDetails').on('click', function()
{
  let details = $('#searchDetails').val();

  $.ajax({
    url: 'api/searchDetailInfo.php',
    type: 'POST',
    data: {details:details},
    dataType: 'html',
    success: function(data, textStatus, jqXHR){
      let jsonObject = JSON.parse(data); 
      $('#example1').DataTable({    
        "data": jsonObject,
        "columns": [
          { "width": "20%", "data": "COLUMN1" },    
          { "width": "20%", "data": "COLUMN2" },    
          { "width": "20%", "data": "COLUMN3" },    
          // some more columns
        ],
        "paging": false,
        "scrollY": 550,
        "scrollX": false,
        "bDestroy": true,
        "stateSave": true,
        "responsive": true,
        "bAutoWidth": false,                    
        "bScrollCollapse": true
      });
    },
    error: function(jqHHR, textStatus, errorThrown) {
      console.log('fail: '+ errorThrown);
      return false;
    }
  }); 
});

Using all of the above, when the modal opens, the headers are initially misaligned until sorting. After that, the headers are aligned.

How do I fix this?

* UPDATE *

So when I comment out both scrollY and scrollX from the datatables function, the column headers are no longer misaligned.

I do not know how to make sense of it. I still need to scroll vertically.

Any thoughts?

Does this answer your question? [datatable jquery - table header width not aligned with body width](https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width) — Dani, Jun 01 '20 at 17:42
@JohnBeasley, it is the answers discussing `.columns.adjust()` you should look at — davidkonrad, Jun 02 '20 at 14:13

datatable misaligned until sort in modal

0 Answers0