HTML table with fixed headers?

Question

Does anyone know a cross-browser CSS/Javascript technique to display a long html table such that the column headers stay fixed on-screen and do not scroll with the table body. Think of the "freeze panes" effect in excel.

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.

Answer 1

Try this:

Pure CSS Scrollable Table with Fixed Header

EDIT:

This one should work in IE7 as seen in the example:

Scrolling HTML Table with Fixed Header

EDIT 2:

Found a couple of extra links that could be of use:

• Stupid fixed header - A JQuery plugin with some limitations.
• Fixed Table Headers - Works differently than the rest, but still nice.

Answer 2

There may be a neater css way, but one way would be to use two frames with a table in the first and a second table in the second scrollable frame. You would need to fix widths though.

Answer 3

Two Divs, one for header, one for Data. Make the data div scrollable, and use javascript to set the width of the columns in the header to be the same as the widths in the data. I think the data columns widths need to be fixed rather than dynamic.

Answer 4

Try this:

http://vikaskhera.wordpress.com/2008/11/06/5-easy-steps-to-create-a-fixed-header/

Answer 5

I am currently trying to work on a CSS only version, it is still far from complete and fails in IE8: CSS only - Table Body Scroll

The thing that sucks with IE is the scrollbar goes up pass the head while Firefox and the others do not. There is also an issue with the borders in the header. Hoping to work on it this week and see if i can figure out the small details.

Answer 6

I found this solution which may help some people. Doesn't work in the default IE8 mode, but does work correctly in compatibility mode: http://geekswithblogs.net/LSheu/archive/2009/01/30/css-table-scrolling-with-fixed-header-for-ie-7.aspx

Answer 7

Fixed column headers and row headers, using jQuery to synchronize scrolling of header DIVs with table content:

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

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).

Answer 8

I've just completed putting together a jQuery plugin that will take valid single table using valid html (have to have a thead and tbody) and will output a table that has fixed headers, optional fixed footer that can either be a cloned header or any content you chose (pagination etc). If you want to take advantage of larger monitors it will also resize the table when the browser is resized. Another added feature is being able to side scroll if the table columns can not all fit in view.

http://fixedheadertable.mmalek.com/

It's extremely easy to setup and you can create your own custom styles for it. Also uses rounded corners in all browsers. Keep in mind i just released it so its still technically beta and there are very few minor issues i'm ironing out.

works in IE6, IE7, IE8, Safari, FireFox and chrome.

Answer 9

Try this open-source project in .NET : CoolGridView. it supports fix header, footer and pager, and a re-sizable column width. Works well with IE 6/7/8, Firefox 3.0/3.5, Chrome and Safari.

http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html

Answer 10

When I play with JQuery, it has bug that if you need to use multiple fixed colums and somehow the columns are not matched with the headers. I create this with less DOM access than the one from JQuery.

http://fixed-table-javascript.blogspot.com/2010/04/fixed-table-column-header-javascript.html

Answer 11

Unfortunately, despite all the proposed solutions out there, all of them deal only with the simple table solutions (one header row). I have not seen anything that deals with complex tables (multiple row headers). Currently, all of the pure CSS solutions fail badly, with the exception that works only in Firefox

tbody { height: [fixed height]; overflow-x: hidden; overflow-y: scroll; }

At this point, I am going with JS/JQuery plugins and work from there.

Answer 12

I know this is an old question, but I stumbled upon it accidentally and just want to plug my own JS plugin:

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

It's created with performance as a priority so no framework was used. There is no demo online I'm afraid but it's tested in real world applications and I had no problems with it.

I created it because none of the solutions at the time sufficed - for example it supports multiple tables next to each other...

Answer 13

hi,

you can use this jquery plugin : http://www.tablefixedheader.com/

It's the only plugin of "fixed header table" without width fixing and without body resizing observers !

Answer 14

Hi,

I have implemented Fixed header, footer and fixed column functionality. Fixed header and footer works fine in IE, FF and Chrome also(Didn't tested on other browsers).

http://s7u.blogspot.com/2010/09/fixed-header-footer-with-out-css-hacks.html

Please let me know if you have any suggestions :-)

Regards,

Shahib

Answer 15

Thanks Homer,

My previous version of scrollable table had few bugs. Now I have fixed them. My blog has all the versions.

http://s7u.blogspot.com

Please let me know if you have any suggestions.

Regards, Shahib