table header fixed on scroll down

Question

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 you need more information.

Answer 1

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

Answer 2

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

Answer 3

Hi,

Try this code, I have implemented scrollable functionality with fixed header and footer.

http://s7u.blogspot.com

Please let me know if it helps you.

Regards, Shahib