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 these ads

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 )

Connecting to %s