How to lock title bar in HTML table?

Question

I use an HTML table and apply vertical scrolling to it, and now I want to freeze the title bar while scrolling. How can i do this?

Answer 1

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; } 

Answer 2

One easy way is to create 2 tables and fix the width of the columns. The first acts as a title

The bottom second table contains the scroll bar and only the data.

Answer 3

for a future search for a solution to create a table with a locked column header:

Here's the css for the main PortfolioList portfolio list , then part of the header :

 <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 from the two sections 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 and / or populate content accordingly.

Hope this helps ...

• Bob

Answer 4

Check out this jQuery plugin. This allows you to freeze the column and fix the header as you like.

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

Answer 5

This seems to work 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>