Scrolling html grid/table with fixed header in JQuery (workaround)

Goal: I had to develop a grid (table)  for a client that has headers fixed but you can scroll through the content, this is to help in case of grids with hundreds of records, so that if you scroll down a few rows the headers don’t disappear.

Challenge: As with almost all html/css builds, the challenge was to make it work in all browsers (needless to say, IE). If you google the problem you get quick answers like this one: http://www.imaputz.com/cssStuff/bigFourVersion.html ; The scrolling grid works great, but the problem is it doesn’t work in IE, if you google further to find a IE solution you get to something like this:  http://geekswithblogs.net/LSheu/archive/2009/01/30/css-table-scrolling-with-fixed-header-for-ie-7.aspx ; works in IE6 but not in IE7, got to another one that works in IE but not Chrome.

Workaround: I realized that trying to fix it with css for all browsers will just lead me to more headaches, so I decided to give css a skip and go to a JScript solution. Basically the idea I came up with was to put a full grid on the website, hide most of the rows with css, put in a custom scroller, and, when you click the scroller, instead of scrolling, I use JScript to hide the top tr on the list one by one, making it look like you are scrolling , if you click to scroll up, it just systematically shows the rows again, the result is that you have no worries about css, and the user can scroll as he/she likes and see the headers.

The Code: I just struggled with wordpress for half an hour to try and paste the code here but to no avail… so here is a link to the example, you can get all the code there: http://www.anvilstudios.co.za/blog_examples/scroller.html

Please note, I know this is not the best implementation and there are better ways to use the algorithm, but that is where you, the developer comes in.  Enjoy :)

Leave a Reply