title: Frozen table column not working seemlessly in pure CSS
body: <p>I am working on a frozen left column of a HTML table. I tried various methods suggested on STO but none of them suited to me. Then I re-created it by using 2 same style HTML tables. Though, I got somewhat success but its not perfect yet. I can't get on with it to fix it. I want to stick to pure CSS to achieve it.</p>
  
  <p>Here's my code in action:</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-css lang-css prettyprint-override"><code> #tb_wrapper {
    border:1px solid red;
    position:relative;
    max-width:960px;
   }
   
   #fixed_tb_wrapper {
    position:absolute;
    left:0;
    top:0;
    z-index:99999;
   }
   
   #scrollable_tb_wrapper {
    border:1px solid #cccccc;
    z-index:-99999;
   }
   
   .tb_records1 {
    border-collapse:separate;
    border-spacing:0;
    text-align:center;
   }
   
   .tb_records1 th {
    background-color:#5F5F5F;
    color:#FFFFFF;
    font-weight:bold;
   }
   
   .tb_records1 th, .tb_records1 td {
    padding:10px;
    border:1px solid #000000;
    font-size:15px;
   }
   
   .tb_records1 tr:nth-child(even) {
    background-color:#F2F2F2;
   }
   
   .tb_records1 tr:hover {
    background-color:#F5F5F5;
   }
  
   .tb_responsive {
    overflow-x:auto;
    overflow-y:hidden;
   }
  
   .tb_records2 {
    border-collapse:separate;
    border-spacing:0;
    text-align:center;
    white-space:nowrap;
    width:100%;
   }
   
   .tb_records2 th {
    background-color:#5F5F5F;
    color:#FFFFFF;
    font-weight:bold;
   }
   
   .tb_records2 th, .tb_records2 td {
    padding:10px;
    border:1px solid #000000;
    font-size:15px;
   }
   
   .tb_records2 tr:nth-child(even) {
    background-color:#F2F2F2;
   }
   
   .tb_records2 tr:hover {
    background-color:#F5F5F5;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="tb_wrapper"&gt;
  
          &lt;div id="fixed_tb_wrapper" style="border:1px solid red;"&gt;
              &lt;table class="tb_records1"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Post ID&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;This is a long Post ID&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;2&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;3&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;4&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;5&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;6&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;7&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;8&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;9&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;10&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div id="scrollable_tb_wrapper" style="border:1px solid blue;"&gt;
              &lt;div class="tb_responsive"&gt;
                  &lt;table class="tb_records2"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Post Name&lt;/th&gt;
                          &lt;th&gt;Post URL&lt;/th&gt;
                          &lt;th&gt;Post Title&lt;/th&gt;
                          &lt;th&gt;Post Heading&lt;/th&gt;
                          &lt;th&gt;Post Content&lt;/th&gt;
                          &lt;th&gt;Post Date Published&lt;/th&gt;
                          &lt;th&gt;Post Date Modified&lt;/th&gt;
                          &lt;th&gt;Post Image&lt;/th&gt;
                          &lt;th&gt;Post Views&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;my-post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;My Post&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet.&lt;/td&gt;
                          &lt;td&gt;2017-07-21 13:58:16&lt;/td&gt;
                          &lt;td&gt;2019-07-30 22:38:36&lt;/td&gt;
                          &lt;td&gt;my-post.jpg&lt;/td&gt;
                          &lt;td&gt;7&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see that the first table which has a single column Post ID is fixed and the right table scrolls through under it. But I am having 2 issues:</p>
  
  <ol>
  <li>The content of scrollable table is visible under first fixed table (column). I used z-index but it has no effect. Don't know why?</li>
  <li>Is it necessary to give fixed width to first fixed table? And then equal left-margin to the right scrollable table? If so then, then it seems working but will that be the only best solution?</li>
  </ol>