title: Column are shifting when there is vertical scroll bar attached
body: <p>I don't understand why the table headers are shifting when there is vertical scroll bar attached to table.</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;div  &gt;
          &lt;ul class="nav nav-tabs" id="tab123" style="margin-top: 26px;"&gt;
              &lt;li&gt;&lt;a href="#div1" data-toggle="tab" &gt;Tab1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div2" data-toggle="tab"  &gt;Tab2&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
          &lt;div class="tab-content"  style="overflow: hidden; margin-left: 20px; height: 504px;"&gt;
              &lt;div  id="div1"  class="tab-pane"&gt;
  
  
                  &lt;div  style="overflow: hidden;margin-top: 10px;"  &gt;
  
                      &lt;table  style="width: 100%" border = "1"&gt;
  
                          &lt;thead&gt;&lt;tr&gt;
  
                                     &lt;th style="padding: 0px;width: 0px;visibility: hidden"&gt;&lt;/th&gt;
                                     &lt;th style="padding: 0px;width: 130px;text-align: left"&gt;Text1&lt;/th&gt;
                                     &lt;th style="padding: 0px;width: 181px;text-align: left"&gt;Text2  &lt;/th&gt;
                                     &lt;th style="padding: 0px;width: 85px;text-align: left"&gt;Text3   &lt;/th&gt;
                                     &lt;th style="padding: 0px;width:0.5px "&gt;&lt;/th&gt;
                                     &lt;th style="padding: 0px;text-align: center;width: 70px"&gt;Text5&lt;/th&gt;
                                 &lt;/tr&gt;
  
                          &lt;/thead&gt;
  
                      &lt;/table&gt;
  
                  &lt;/div&gt;
  
                  &lt;div  style="overflow: auto;height: 50px;" class="tab-pane"&gt;
                      &lt;table id ="tblSysDetails"   style="width: 100%;float: left" border ="1"&gt;
  
                          &lt;tbody &gt;
  
                              &lt;tr &gt;
  
                                  &lt;td   style="padding: 0px;width: 0px;visibility: hidden"  &gt;&lt;/td&gt;
                                  &lt;td  style="padding: 0px;width: 130px;text-align: left" &gt;BBB&lt;/td&gt;
                                  &lt;td  style="padding: 0px;width: 181px;text-align: left" &gt;CCC&lt;/td&gt;
                                  &lt;td  style="padding: 0px;width: 85px;text-align: left" &gt;DDD&lt;/td&gt;
                                  &lt;td  style="padding: 0px;width: 0.5px"&gt;&lt;/td&gt;
                                  &lt;td  style="padding: 0px;text-align: center;width: 70px" &gt;XXX&lt;/td&gt;&lt;/tr&gt;
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
                  &lt;table style="width: 95%" id="tblCountSysTableChanges"&gt;
                      &lt;tr&gt;&lt;td style="font-weight: bold;text-align: right"&gt;456 &lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;
  
                  &lt;div id="div2"  class="tab-pane"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;AAAAAAAAA&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here are my fiddles
     <a href="http://jsfiddle.net/YPsgN/29/" rel="nofollow noreferrer">.1 This one is without vertical scroll bar</a></p>
  
  <p><a href="http://jsfiddle.net/YPsgN/27/" rel="nofollow noreferrer">2. This is with vertical scroll bar</a>  . This second fiddle is shifting columns.</p>
  
  <p>Can someone tell why and how to avoid it?</p>