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:

http://rubynor.com/table-fixed-header/example.html

Download the source code from: github.com/oma/table-fixed-header

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

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s