Fixed <thead> in <table>

Question

<table border="1" style="height:50px; overflow:auto;">
  <thead>
    <tr>
      <th>Col 1
      </th>
      <th>Col 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 3
      </td>
      <td>Cell 4
      </td>
    </tr>
    <tr>
      <td>Cell 5
      </td>
      <td>Cell 6
      </td>
    </tr>
  </tbody>
</table>

I'd like the above table to be of 50px height so the scrollers would kick in when the content grows, but I'd also like table headers (thead) to be fixed always on top, while other content can be scrollable. Is there an solution, preferable using jQuery?

Thanks in advance for your help.

Answer 1

Try this post: http://stackoverflow.com/questions/192608/jquery-scrollable-sortable-filterable-table

It looks like they've got what you need (which is a freezable, scrollable jquery table).

Answer 2

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 50px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

Update:

Check this out:

Link

Another Link a t CSS Tricks