title: Broken table header in a Bootstrap modal
body: <p>I need to put a scrollable datatable in a modal bootstrap. The problem is that the header is broken . Only solved if I resize the browser or if I click on the header to reorder. I try to put the same code without the modal and it works perfect, apparently is an incompatibility with the modal and scroll. Without the scroll datatable works well.</p>
  
  <p>I show how it looks when I open the modal:</p>
  
  <p><img src="https://i.stack.imgur.com/sOQFo.png" alt="http://k30.kn3.net/7/2/B/F/2/8/331.png"></p>
  
  <p>I use:</p>
  
  <ul>
  <li>Bootstrap v3.0.0</li>
  <li>DataTables 1.10.7</li>
  <li>TableTools 2.2.4</li>
  </ul>
  
  <p>My code:</p>
  
  <pre><code>$('#rutinasTable').DataTable({
     "sScrollY": "210px",
     "sScrollYInner": "100%",
     "sScrollX": "100%",
     "sScrollXInner": "100%",
     "scrollCollapse": true,
     "pageLength": 50,
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="rutinasTable" class="display table table-bordered table-striped table-condensed"&gt;
     &lt;thead&gt;
     &lt;tr&gt;
        &lt;th&gt;Rutina&lt;/th&gt;
        &lt;th&gt;Act. Datos&lt;/th&gt;
        &lt;th&gt;Antig. Datos&lt;/th&gt;
        &lt;th&gt;Criticidad&lt;/th&gt;
        &lt;th&gt;Observaciones&lt;/th&gt;
        &lt;th&gt;Estado&lt;/th&gt;
     &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
     &lt;tr&gt;
        &lt;td&gt;SOS&lt;/td&gt;
        &lt;td&gt;08/07/2009&lt;/td&gt;
        &lt;td&gt;697 hrs&lt;/td&gt;
        &lt;td&gt;M-Media&lt;/td&gt;
        &lt;td&gt;NIVEL&lt;/td&gt;
        &lt;td&gt;Analizar&lt;/td&gt;
     &lt;/tr&gt;
     &lt;/tbody&gt;
     &lt;/table&gt;
  </code></pre>
  
  <p>You can see the error in <a href="http://jsfiddle.net/8ennjt3t/7/" rel="nofollow noreferrer">this jsFiddle</a>.</p>
  
  <p>You have to click on the graphic bar to open the modal. To see how it manages the header or try clicking the header to reorder.</p>