HTML table with fixed headers and a fixed column?

Question

Does anyone know a CSS/Javascript technique to display a long html table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.

I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.

If there was a jquery plugin that would be great! If it helps the only browser I care about is firefox.

Answer 1

I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).

Answer 2

You could have 3 frames. One frame for the headers, one for the first column, and a third for the rest of the data.

The third frame can set the overflow to auto. This will bring scrollbars in when necessary.

Answer 3

The first column has a scrollbar on the cell right below the headers

<table>
    <thead>
     <th> Header 1</th>
     <th> Header 2</th>
     <th> Header 3</th>
    </thead>
    <tbody>
     <tr>
      <td>
       <div style="width: 50; height:30; overflow-y: scroll"> 
        Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
        fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
       </div>
      </td>
      <td>
       Hello world
      </td>
      <td> Hello world2
     </tr>
    </tbody>
</table>

Answer 4

If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a <tbody> styled with "overflow-y: auto" like this:

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

If the <tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.

Answer 5

YUI DataTable

I don't know if YUI DT has this feature but I won't be surprised if it does.

Answer 6

You might be looking for this.

It has some known issues though.

Answer 7

http://fixed-header-using-jquery.blogspot.com/ check this

Answer 8

Working example of link posted by pranav:

http://acatalept.com/common/test/fixed-table.html

FYI:

Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2.

Not screen-reader-friendly (headers aren't part of content table).

EDIT: fixed link to jQuery library, which stopped working at some point after my original post.

Answer 9

I see this, although an old question, is a pretty good place to plug my own script:

http://code.google.com/p/js-scroll-table-header/

It just works with no configuration and is really easy to setup.

Answer 10

Here is a good jquery plugin, working in all browsers !

You have a fixed header table without fixing his width...

Check it : http://www.tablefixedheader.com/

Answer 11

In this answer there is also the best answer I found to your question:

http://stackoverflow.com/questions/673153/html-table-with-fixed-headers/673162#673162

and based on pure CSS.

Answer 12

Hi Guys,

I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in Scrollable Table. Please let me your suggestions.

Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)

Answer 13

This blog has good information about scrollable tables. It has different types of scrollable table.

http://s7u.blogspot.com

Regards, Shahib