title: Datatables headers not full width on page load
body: <p>When loading my web application page with datatables, the datatable is loaded but the <code>&lt;thead&gt;</code> row is not full width of the table.</p>
  
  <p>After editing the data, or searching in the datatable search, the header jumps to full width. See picture.</p>
  
  <p>Any solution or workaround for this?</p>
  
  <p>Screenshot of datatable:</p>
  
  <p><img src="https://i.stack.imgur.com/qBF6k.png" alt="Screenshot of datatable"></p>
  
  <p>My normal datatables are fine, but this one is loaded within a modal. 
  Code modal:</p>
  
  <pre><code>&lt;!-- Get selected shops modal --&gt;
  &lt;div id="SelectedShopsModal" class="infomodal"&gt;
      &lt;div class="shops-content"&gt;
          &lt;h2&gt;&lt;span class="closeModalSelectedShops"&gt;&amp;times;&lt;/span&gt; &lt;?php echo lang('Shops'); ?&gt;&lt;/h2&gt;
          &lt;div class="detailblock"&gt;
              &lt;table id="DataListTableSelectedShops" class="display" cellspacing="0" width="100%"&gt;
                  &lt;thead&gt;
                      &lt;th class="OE"&gt;&lt;?php echo lang('Shop_No'); ?&gt;&lt;/th&gt;
                      &lt;th class="OE"&gt;&lt;?php echo lang('Shop_Name'); ?&gt;&lt;/th&gt;
                      &lt;th class="OE"&gt;&lt;?php echo lang('Shop_District'); ?&gt;&lt;/th&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;?php foreach($selected_shops as $shop){
                          echo "&lt;tr&gt;&lt;td&gt;" . $shop['Shop'] . "&lt;/td&gt;&lt;td&gt;" . $shop['Name'] . "&lt;/td&gt;&lt;td&gt;" . $shop['District'] . "&lt;/td&gt;&lt;/tr&gt;";
                      } ?&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;br /&gt;&lt;button class="closeBtnSelectedShops btn red"&gt;&lt;?php echo lang('Close'); ?&gt;&lt;/button&gt;
              &lt;button class="btn red" onclick="delete_oneshots();"&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;?php echo lang('Delete_shops'); ?&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My javascript that is used in the footer of my page:</p>
  
  <pre><code>//datatable to display all selected shops on detail page
  selectedshoptable = $('#DataListTableSelectedShops').DataTable( {
      "dom": "Bfrtip",
      "scrollY": "300px",
      "scrollCollapse": true,
      "bPaginate": false,
      "bInfo" : false,
      "fields": [ {
          label: "Shopnr",
          name: "Shop"
      }, {
          label: "Shopname:",
          name: "Name"
      }, {
          label: "District",
          name: "District"
      }],
      "buttons":[{
          extend: 'selectAll',
          text: '&lt;?php echo lang('Select_all'); ?&gt;',
          className: 'btn red'
      }, {
          text: '&lt;?php echo lang('Select_none'); ?&gt;',
          className: 'btn red',
          action: function () {
              selectedshoptable.rows().deselect();
          }
      }],
      "language": {
          "zeroRecords": "&lt;?php echo lang('Nothing_found'); ?&gt;",
          "infoEmpty": "&lt;?php echo lang('No_records_available'); ?&gt;",
          "search":"&lt;?php echo lang('Search'); ?&gt;",
          "buttons": {"selectNone": "Select none"}
      }
  });
  </code></pre>