title: How can I create a fixed table header
body: <p>I have a table that is auto generated using php and pear html_table. The table has a th row across the top and they have a class of assetHeader. The table also has a th column down the left side with a class of timeHeaders. The table consists of 96 rows by an indeterminate number of columns. I am attempting to fix the top header columns and allow the user to scroll the table (this was they always see the header the cells belong to). I have tried the normal css tricks to fix the table headers in place like this:</p>
  
  <pre><code>.main .assetHeader
  {
      /********************/
      position:fixed;
      display:inline-block;
      /*********************/
  }
  </code></pre>
  
  <p>When I do this, the result is that all the headers are stacked on top of each other and only the last one is fixed to the left side of the table (and it is smaller than the actual column width). I then attempted a little jquery to add a class to the parent table row, like this:</p>
  
  <pre><code> $('.assetHeader').parent('tr').addClass('headerRow');
  </code></pre>
  
  <p>The corresponding css is similar to the above, and this works but with improper formatting of the th cells (they are all displayed and fixed into place, but are all small and no longer line up with the columns they belong to). I have been working here and there on this feature for a couple of weeks now. I have tried many different approaches and have only included the two that seem most viable. Plus I cannot remember everything I've tried that has failed. Any and all help would be greatly appreciated! </p>