title: Data Table header not aligned in bootstrap tab
body: <p>I am trying to use DataTable with Twitter bootstrap Tabs and for that i am trying following code, Its calling dataTable successfully  and creating dataTable but for tab2 DataTable header got mis-aligned</p>
  
  <pre><code> &lt;div&gt;
      &lt;!-- Nav tabs --&gt;
      &lt;ul class="nav nav-tabs" role="tablist"&gt;
          &lt;li role="presentation" class="active"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Data table 1&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&gt;Data table 2&lt;/a&gt;
  
      &lt;/ul&gt;
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
          &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;
              &lt;table class="table" id="table1"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;First table&lt;/th&gt;
                          &lt;th&gt;First table&lt;/th&gt;
                          &lt;th&gt;First table&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;1&lt;/th&gt;
                          &lt;td&gt;Mark&lt;/td&gt;
                          &lt;td&gt;Otto&lt;/td&gt;
                          &lt;td&gt;@mdo&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;2&lt;/th&gt;
                          &lt;td&gt;Jacob&lt;/td&gt;
                          &lt;td&gt;Thornton&lt;/td&gt;
                          &lt;td&gt;@fat&lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div role="tabpanel" class="tab-pane" id="profile"&gt;
              &lt;table class="table" id="table2"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;second table&lt;/th&gt;
                          &lt;th&gt;second table&lt;/th&gt;
                          &lt;th&gt;second table&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;1&lt;/th&gt;
                          &lt;td&gt;Mark&lt;/td&gt;
                          &lt;td&gt;Otto&lt;/td&gt;
                          &lt;td&gt;@mdo&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;2&lt;/th&gt;
                          &lt;td&gt;Jacob&lt;/td&gt;
                          &lt;td&gt;Thornton&lt;/td&gt;
                          &lt;td&gt;@fat&lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When i add <code>scrollY</code> header gets un-aligned </p>
  
  <p><a href="https://jsfiddle.net/sLrnzwz1/1/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI3c4.png" alt="jsFiddle"></a></p>