title: HTML table: Sticky column overlapping header
body: <p>I am trying to implement an HTML table that could have a sticky column(s) and a sticky header at the same time, using javascript and css.</p>
  
  <p>Basically I am trying to ensure the stickiness of the header and the columns by translating them at the right position whenever the scroll position is changed.</p>
  
  <p>This technique works fine, when I scroll horizontally the sticky columns are properly displayed at the fixed position, but when I start scrolling vertically the sticky column cells overlap the header cells and hide them.</p>
  
  <p><a href="https://i.stack.imgur.com/Pp5eR.png" rel="nofollow noreferrer">Here is what I am seeing when it happens</a></p>
  
  <p>I tried to play with the z-index to make sure the header is always on top of the rows, but for some reason it's not working.</p>
  
  <p>If anyone ever encountered this issue and could share a way to fix it, that would be really appreciated.</p>
  
  <p>Thanks in advance.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="tablesorter"&gt;
      &lt;thead class="sticky-header"&gt;
          &lt;tr&gt;
              &lt;th class="sticky-column"&gt;Whatever Header&lt;/th&gt;
              &lt;th&gt;Whatever Header&lt;/th&gt;
              &lt;th&gt;Whatever Header&lt;/th&gt;
              ...
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="sticky-column"&gt;Whatever&lt;/td&gt;
              &lt;td&gt;Whatever&lt;/td&gt;
              ...
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="sticky-column"&gt;Whatever&lt;/td&gt;
              &lt;td&gt;Whatever&lt;/td&gt;
              ...
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var $win = $(window),
  $stickyHeader = $('.sticky-header'),
  $stickyColumns = $('.sticky-column');
  
  $(document).on('scroll', function () {
      deltaY = $win.scrollTop() - $stickyHeader.offset().top;
      deltaX = $win.scrollLeft() - $stickyHeader.offset().left;
      $stickyHeader.children().css({
          "transform": "translate(0px," + (deltaY &gt; 0 ? deltaY : 0) + 
  "px)"
      });
      $stickyColumns.css({
          "transform": "translate(" + (deltaX &gt; 0 ? deltaX : 0) + "px, 
  0px)"
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    table {
      margin: 100px auto 800px auto;
  }
  
  thead th {
    background-color: yellow;
    border-right: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 60px;
    z-index: 3;
  }
  tbody td {
    background-color: red;
    border-right: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 30px;
    z-index: 1;
  }
  
  tbody td.sticky-column {
    z-index: 2;
  }
  
  tbody th.sticky-column {
    z-index: 4;
  }
  </code></pre>
  
  <p>Here is the JSFiddle reproducing the issue:
  <a href="http://jsfiddle.net/asoua/5942rqty/" rel="nofollow noreferrer">http://jsfiddle.net/asoua/5942rqty/</a></p>