title: Fixed html table header while scrolling
body: <p>I have the following table structure:</p>
  
  <pre><code>&lt;table&gt;   
  &lt;thead&gt;   
      &lt;tr&gt;   
          &lt;th colspan="4"&gt;Current&lt;/th&gt;   
          &lt;th colspan="4"&gt;New/Requested&lt;/th&gt;   
      &lt;/tr&gt;   
      &lt;tr&gt;   
          &lt;th nowrap="nowrap"&gt;RSD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;  
          &lt;th nowrap="nowrap"&gt;CRSD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;MSD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;Open QTY &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;CRD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;CRSD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;  
          &lt;th nowrap="nowrap"&gt;MSD &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;Open QTY &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;Action&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;Reason&lt;/th&gt;   
          &lt;th nowrap="nowrap"&gt;Action Code Status &lt;/th&gt;   
      &lt;/tr&gt; 
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;  
              &lt;td&gt;&lt;/td&gt;   
              .....plenty of rows
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/thead&gt;   
  &lt;/table&gt; 
  </code></pre>
  
  <p>I am trying to fix the header so that if I scroll down it stays visible.
  I looked at <a href="https://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div">this post</a> but couldn't understand it. How can I do this?     </p>