title: The fixed header tables are getting issue with horizontal scrolling
body: <p>I'm trying to create a demo with Fixed Header Tables. The first table horizontal scrolling is working fine but I'm getting a problem with a second table horizontal scrollbar. When I'm scrolling the horizontal scrollbar of second table the vertical scrollbar area is not fixed. I'm sharing my code.</p>
  
  <p><strong>Tables Demo:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// JS
  $('#maintalbe .pane-hScroll').scroll(function() {
    $('.pane-vScroll').width($('.pane-hScroll').width() + $('.pane-hScroll').scrollLeft());
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  body {
    font: 14px/1 Arial, sans-serif;
  }
  table {
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
    width: 100%;
  }
  th, td {
    padding: 8px 16px;
    border: 1px solid #ddd;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .pane {
    background: #eee;
  }
  .pane-hScroll {
    overflow: auto;
    width: 400px;
    background: green;
  }
  .pane-vScroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 200px;
    background: red;
  }
  
  .pane--table2 {
    width: 400px;
    overflow-x: scroll;
  }
  .pane--table2 th, .pane--table2 td {
    width: auto;
    min-width: 160px;
  }
  .pane--table2 tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    height: 200px;
  }
  .pane--table2 thead {
      display: table-row;
  }
  .mt-4 {
    margin-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h3&gt;Example 1: Two-Table Structure&lt;/h3&gt;
  &lt;div id="maintalbe" class="pane pane--table1"&gt;
    &lt;div class="pane-hScroll"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
  
      &lt;div class="pane-vScroll"&gt;
        &lt;table&gt;
          &lt;tbody&gt;
            &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;foo foo foo foo foo foo foo foo foo foo foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;13&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;14&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;15&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;16&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;17&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;18&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;19&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;20&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;21&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;22&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;23&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;24&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;25&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;26&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;27&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;28&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;28&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;29&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;30&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h3 class="mt-4"&gt;Example 2: Two-Table Structure&lt;/h3&gt;
  &lt;div class="pane pane--table1"&gt;
    &lt;div class="pane-hScroll"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;&lt;th&gt;foo&lt;/th&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
  
      &lt;div class="pane-vScroll"&gt;
        &lt;table&gt;
          &lt;tbody&gt;
            &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;foo foo foo foo foo foo foo foo foo foo foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;13&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;14&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;15&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;16&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;17&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;18&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;19&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;20&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;21&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;22&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;23&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;24&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;25&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;26&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;27&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;28&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;28&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;29&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;30&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>