title: DataTables in bootstrap modal header width issue
body: <p>When I add scrollY to the datatables in a partial view, the headers are compacted into the left side of the screen. When I click the header to sort, they expand correct to 100%. Using the scroller option and scrolling down far enough also triggers the columns to be rendered correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/BunjV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BunjV.png" alt="enter image description here"></a></p>
  
  <p>When looking at the width of each column header, the width is set to 0.
  After doing one of the above, the widths are then corrected as they should be.</p>
  
  <p>Trigger from main view to load partial</p>
  
  <pre><code>$('a[data-target="#list-view-audits-modal"]').on('click', function (e) {
      e.preventDefault();
      $.ajax({
          type: "GET",
          url: "../Home/GetAudits",
          success: function (data) {
              $('body').append(data); //this adds the modal called below
              $('#list-audits-modal').modal('toggle')
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              WebUI.handleError(XMLHttpRequest, textStatus, errorThrown);
          }
      });
  });
  </code></pre>
  
  <p>now in the partial view I call the following to transform the table</p>
  
  <pre><code>$(function () {
  var dt = $('#table-audits-results').DataTable({
      order: [[0, "desc"]],
      buttons: ['csv'],
      scrollY: 200,
      scroller: true,
      responsive: true
      });
  });
  </code></pre>
  
  <p>I have searched and have tried so many things I have found in other posts but so far nothing has resolved this issue. I assume this has something to do with it being transformed in a partial view?</p>
  
  <p><strong><em>Update 1</em></strong></p>
  
  <p>Ok so it seems this is an issue because the modal has no size yet. To test this, I put a delay in the trigger of transforming the datatables and the headers are now correct.</p>
  
  <p>Now I need to figure out how to trigger this as soon as the modal has a size so the user does't see a standard table and watch it transform into the DataTables.</p>
  
  <p><strong><em>Update 2</em></strong></p>
  
  <p>I have tried the following but you still see the mass amount of data load before it's transformed</p>
  
  <pre><code>$(document).on('show.bs.modal', '#list-audits-modal', function () {
      alert('triggered');
      var dt = $('#table-audits-results').DataTable({
          order: [[0, "desc"]],
          buttons: ['csv'],
          scrollY: 200,
          scroller: true,
          responsive: true
      });
  });
  </code></pre>
  
  <p><strong><em>Update 3</em></strong></p>
  
  <p>I don't believe this is ideal as there is still a delay that the user sees the headers incorrect so still looking for a better solution</p>
  
  <p>What i'm using in the partial view.</p>
  
  <pre><code>var dt = $('#table-audits-results').DataTable({
      order: [[0, "desc"]],
      dom: 'Bfrtip',
      buttons: ['csv'],
      scrollY: 200,
      scroller: true,
      responsive: true
  });
  
  $(document).on('shown.bs.modal', '#list-audits-modal', function () {
      dt.columns.adjust().draw();
  });
  </code></pre>