How to freeze header row in HTML table?

I am using an HTML table and have a开发者_如何学Gopplied vertical scroll to it and now I want to freeze the header row during scrolling. How can I do this?

HTML:

<table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

CSS:

#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }

One easy way is to create 2 tables and fix the column widths. The first one act as Header

The lower second table is where the scroll bar is present and only the data.

for some future seek of a solution to creating a table with a locked column header:

Here's the css for the main PortfolioList div, then the header portion:

<style type="text/css">
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css, overflow makes it scrollable */
        height:500px; width:680px; position: static;  overflow-y:auto; float:left;                             
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        background-color:#7ac0da; height:45px; width:680px; position: static;  float:left;                             
    }    
</style>

Now here are the tables within the two divs mentioned above:

    <div class="PortfolioList_hdr">
       <table id="pftable_hdr">
        <caption>Portfolio Definitions</caption>
        <thead>
            <tr>
             <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="PortfolioList">
    <table id="pftable">
        <tbody>
        </tbody>
    </table>
</div>

I used jQuery to add the and and populate the contents accordingly.

I hope this helps...

• Bob

Check out this jQuery plugin. It lets you freeze the column and fix the header, like you wanted.

http://gridviewscroll.aspcity.idv.tw/

This seems working in FF.

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px; overflow-y:auto; display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>