title: Data Table headers not responsive to the modal
body: <p>Im trying to have a <code>datatable</code> in a modal but when i launch the modal, the headers is not responsive. But if the table is not in the modal, it's responsive.</p>
  
  <p>Please see code below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var table = $('#testtable').DataTable({
      info: true, // TO DISPLAY THE INFO 'SHOWING 1 TO X OF Y ENTRIES'
      lengthMenu: [
        [5, 10, 25, 50, -1],
        [5, 10, 25, 50, "All"]
      ],
      pageLength: 10,
      pagingType: 'full_numbers',
      language: {
        emptyTable: "No Data Found"
      },
      dom: 'tip',
      paging: true,
      responsive: true,
      scrollCollapse: true,
      scrollY: '50vh',
      columnDefs: [{
        targets: 'no-sort',
        orderable: false
      }]
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.css" /&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css"&gt;
  &lt;div class="modal fade" id="testmodal"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
  
        &lt;!-- Modal Header --&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Test Modal&lt;/h4&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;!-- Modal body --&gt;
        &lt;div class="modal-body"&gt;
          &lt;table class="table table-responsive-xl responsive table-bordered table-dark" id="testtable"&gt;
            &lt;thead&gt;
              &lt;th&gt;Test Column&lt;/th&gt;
              &lt;th&gt;Test Column&lt;/th&gt;
              &lt;th&gt;Test Column&lt;/th&gt;
            &lt;/thead&gt;
            &lt;tbody id="testtable_tbody" class="text-dark"&gt;
              &lt;tr&gt;
                &lt;td&gt; TEST DATA &lt;/td&gt;
                &lt;td&gt; TEST DATA &lt;/td&gt;
                &lt;td&gt; TEST DATA &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  
        &lt;/div&gt;
  
        &lt;!-- Modal footer --&gt;
        &lt;div class="modal-footer"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button data-toggle="modal" data-target="#testmodal"&gt;Launch Modal&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>