title: Sticky table header
body: <p>I using html-table to present some information. This table can be very long. So, if the user scroll down, the header of the rows is going outside of the screen. </p>
  
  <p>What I trying to do is to make the header of the table - sticky, when the user is scroll down. </p>
  
  <p>This is how my HTML + CSS + JS (jquery) looks like:
  <a href="https://jsfiddle.net/d3h7mxLf/2/" rel="nofollow">https://jsfiddle.net/d3h7mxLf/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="the-table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="domain-col"&gt;Name&lt;/th&gt;
              &lt;th&gt;Size&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Joe&lt;/td&gt;
              &lt;td&gt;40&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>th {
      background-color:red;
  }
  #the-table {
      width: 100%;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>var topPos;
  
  function AncorControlMatches() {
      topPos = Math.max(0, $("#the-table").offset().top - $(this).scrollTop());
      if (topPos == 0) {
          $("#the-table thead tr").css("top", topPos);
          $("#the-table thead tr").css("position", "fixed");
      } else {
          $("#the-table thead tr").removeAttr("style");
      }
  }
  
  
  $(window).scroll(function () {
      AncorControlMatches();
  });
  
  $(document).ready(function () {
      setTimeout(function () {
          AncorControlMatches();
          $(window).trigger('resize');
      }, 300);
  });
  </code></pre>
  
  <p>The problem is when the user is scroll down, the header column width is being wrong. The width of the  elements became very small. </p>
  
  <p>How I can solve this problem?</p>