title: dataTable Headers Misaligned
body: <p>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.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-lg-12"&gt;
      &lt;table width="100%" class="table table-striped table-bordered table-hover" id="sTable"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;center&gt;&lt;button type="button" title="Delete All" onclick="delAll();" class='btn btn-danger btn-sm btn-inline'&gt;&lt;i class="fa fa-trash-o fa-1x"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/center&gt;
            &lt;/th&gt;
            &lt;th&gt;Slot Number&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Time&lt;/th&gt;
            &lt;th&gt;Flight&lt;/th&gt;
            &lt;th&gt;Location&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class="odd gradeX"&gt;
            &lt;td align="center"&gt;
              &lt;button type="button" title="Delete" onclick="del();" class='btn btn-danger btn-sm btn-inline'&gt;&lt;i class="fa fa-trash-o fa-1x"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%=value%&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have the following jscript at the bottom of the code:</p>
  
  <pre><code>$('#sTable').DataTable( {
    scrollY: "250px",
    scrollCollapse: true,
    paging: false,
    info: true,
    searching: false,
    ordering: false
  });
  </code></pre>
  
  <p>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!?!?</p>
  
  <p>Ideas?  I have tried everything in StackExchange that already was noted as an answer...to no avail.</p>
  
  <p>Thanx in Advance!</p>