html - Keeping header element always on top when scrolling?

Question

I've read numerous articles on this topic and tried implementing a few, but I just can't seem to get it right. I have a simple HTML table, which compares products:

<table>
  <tr>
    <th>Product:</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
    <td>Product 1 features</td>
    <td>Product 2 features</td>
    <td>Product 3 features</td>
   </tr>
   and so the list goes on...
 </table>

What I want is for the header row to always be on top of the active window, that is the top row when I scroll down, since my rows go down quite far. I want to keep the product names in the tags always visible so that a user can relate the content to the different products in the very top row all the time.

Thank you in advance!

Answer 1

I simple technique is to have the header row in a separate table from the actual data. This header table is set to have it's position as fixed, and then the table below, which holds the results, has it's margin-top set the height of the header table.

This creates the effect of the header staying where it is and the table scrolling.

A basic example here: http://jsfiddle.net/zKDR4/2/

You can also create a fixed header with jQuery plugins. Take a look at this one http://fixedheadertable.com/ really simple to implement.

Edit

As Anders has mentioned, if you go down my suggested route, you will need to set the widths of the th and td elements. Otherwise they would not match up since they are separate tables.