title: Vertical scrollbar displaces table rows HTML
body: <p>I am working with a table design that should have its height and width full-expandable.</p>
  
  <p>The table works great, but I cannot adjust or fit the column names position over the table columns due the scrollbars width. When the scrollbar is visible (and it should be always visible) the table rows are being displaced and their columns names looks bad.</p>
  
  <p>Can you please give me some thoughts? </p>
  
  <p>Is there any way to change the scrollbar z-index or something that avoids the displacing behavior?</p>
  
  <p>Here is a jsFiddle: <a href="http://jsfiddle.net/Gabriel_Mendez/T2pmq/">See sample here</a></p>
  
  <p>HTML:    </p>
  
  <pre><code>     &lt;div id="tablecontainer"&gt;
          &lt;div id="topbar"&gt;
              &lt;div class="colname cellwidth1"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth2"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth3"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth4"&gt;ABC&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="breakline"&gt;&lt;/div&gt;
          &lt;div id="expandtable"&gt;
              &lt;div class="divrow"&gt;
                  &lt;div class="divcell cellwidth1"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth2"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth3"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth4"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="divrow"&gt;
                  &lt;div class="divcell cellwidth1"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth2"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth3"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="divcell cellwidth4"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
          &lt;div class="breakline"&gt;&lt;/div&gt;
          &lt;div id="topbar"&gt;
              &lt;div class="colname cellwidth1"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth2"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth3"&gt;ABC&lt;/div&gt;
              &lt;div class="colname cellwidth4"&gt;ABC&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body, #expandtable, #tablecontainer 
  {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      overflow-y: hidden;
  }
  
  #tablecontainer 
  {
      width: 100%;
      margin: 0 auto;
      padding-top: 50px;
      max-width: 900px;
  }
  
  #expandtable
  {
      margin: 5px 0 0 0px;
      overflow-x: hidden;
      overflow-y: scroll;
      height: 60%;
      border-bottom: 0;
      background-color: #eee;
      margin: 0 auto;
  }
  
  .breakline { clear:both;}
  
  .divcell 
  { 
      float:left; 
      border: 1px solid #999; 
      box-sizing: border-box; 
      min-height: 30px; 
  }
  .colname 
  { 
      float:left; 
      border: 1px solid #e5e5e5; 
      box-sizing: border-box;
  }
  
  .cellwidth1 { width:10%; }
  .cellwidth2 { width:45%; }
  .cellwidth3 { width:35%; }
  .cellwidth4 { width:10%; }
  </code></pre>