table header fixed on scroll down

I have a table with header on it. I need the header to be fixed when the user scrolls the table data.

my table is as follows

<div style="height: 300px;overflow: auto">
    <table>
       <thead>
           <tr>
                <th> Nr. </th>
                <th> Name </th>
                <th> Status </th>
                <th> Date </th>
           </tr>
       </thead>
       <tbody>
           <tr>
           <?php  while($record = odbc_fetch_array($result)) { ?>
                       <td> <?php echo$record['Nr']; ?></td>
                       <td> <?php echo$record['Name']; ?></td>
                       <td> <?php echo$record['Status']; ?></td>
                       <td> <?php echo$record['Date']; ?></td>

          <?php }?>
          </tr>               
      </tbody>
</table>
</div>    

Let me know if开发者_C百科 you need more information.

your syntax is wrong. this will not work. you have to put the table head inside section. not . then you can define overflow: auto and a fixed height to tbody and you will be able to scroll inside the table.

<table>
    <thead>
        ... heading
    </thead>
    <tbody style="height: 100px; display: block; overflow: auto; ">
        ... bodycols
    </tbody>
</table>  

something like that, but pleas s dont do this. its very unreliable. please do two seperate tables, wrap them inside a div and make one div fixed height and overflow auto. two more links:

http://www.cssplay.co.uk/menu/tablescroll.html

http://www.imaputz.com/cssStuff/bigFourVersion.html

To begin, your code is wrong.

The Tr with th's must be wrapped with a thead, the other ones by a tbody.

Then, you should watch the source code of this page

If you set a fixed height on the table, if it doesn't have content or very few rows, they will expand to be very high and fill the space. I don't know if that's what you want.

This solution might work for you depending on the style of your headers. http://salzerdesign.com/blog/?p=191