Fixed position for table header when scrolling the page

We have made some very complex tables as part of a project to replace some excel spreadsheet. I must admit, Excel is a worthy adversary. Think of all the flexibility it provides! Functions, adding columns, merging and splitting rows, styling and more. We have replaced only a subset of this functionality.

In this post is a solution to a major problem we had when our tables grew too big. The client wanted the headers to stick. Sounds simple, no? Well, it was h… We’ve learned a thing or too about html and table thead and tbody. Luckily for you, we have wrapped the solution in a single javascript file for you to include. Just add our handles (css classes) to your table and thead and trigger the plugin.

Se a live example here:

Download the source code from:

And vote for the answer at stackoverflow to give it more attention, and if you like it! HTML table with fixed headers?

I hope you like it!

About Ole Morten Amundsen

Developer, programmer, entrepreneur. Java, .Net, ruby, rails, agile, lean. Opinionated enthusiast!
This entry was posted in gui, javascript and tagged , , , , , . Bookmark the permalink.

2 Responses to Fixed position for table header when scrolling the page

  1. Anonymous says:

    clicked your link in IE9 and it doesn’t work

Leave a Reply to Anonymous Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s