Comments on: Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome

By: My Homepage

My Homepage — Fri, 06 Jan 2012 10:38:20 +0000

… [Trackback]…

[...] Read More here: blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/ [...]…

By: rajesh

rajesh — Tue, 19 Jul 2011 10:43:48 +0000

hi
u designed dis table with fixed width but i need in % with full width according to resolution , dis is the requirement can u help me out with pure css with light javascript ?

By: Zafar

Zafar — Fri, 10 Jun 2011 19:14:42 +0000

Hi OXADeveloper,

This is good stuff and it helped me solve some UI problem I was facing. I am using vertical scroll with fixed header but for a table in which rows can be highlighted. So when cursor moves on data of any row, that row will be highlighted by changing background.

THE ISSUE: As soon as the row is highlighted on mouseover the scroll doesn’t happen using mouse-wheel (scroll locked due to highlighting). Please note that I have extended the scrollable area to entire table by increasing the emulator table width (whereas in your example it is restricted to using scroll-bar ).

This is specific requirement I have wherein the table can be scrolled from anywhere on the table area.

Please help me find a work around so that it will be scrollable even after row is highlighted. I can send you code snippet with this problem if needed.

Thanks,
Zafar Hakim

By: Shankar

Shankar — Fri, 13 May 2011 13:59:07 +0000

Hi,

I really like this structure. I want to make the first four columns in the table frozen keeping the header fixed. Could you please let me know how can i achieve this.

Thanks,
Shankar

By: Boston15

Boston15 — Sat, 15 Jan 2011 18:42:05 +0000

Is there a way to lock 1 or more left hand columns?

By: Quincho

Quincho — Wed, 06 Oct 2010 03:08:53 +0000

Greg, you need to attach an event handler (callback function) to the mouse wheel with javascript.

I’ve implemented an alternative solution using the mootools javascript framework but it took me a while to create it.

Just let me tell that the solution exposed in this blog is cleaner (less javascript code) than mine and both do exactly the same. So, if you don’t need a complex functionality in your website (like sorting columns, resizing columns, filter, search, etc) I’d recommend to use this solution (html + CSS) instead of using a whole javascript class or framework.

By: Kumar

Kumar — Wed, 09 Jun 2010 13:09:27 +0000

Dear friends this code is not working in ie6, any help is appreciated.

By: oxadeveloper

oxadeveloper — Mon, 05 Apr 2010 10:12:08 +0000

Dear Raj,
If you want to add a fixed footer you should create one more table (for footer content) and put it under div#y-scroll. This table should have fixed cells width as table for header.
Also we’ve added the link to demo and source where left scroll jumping is fixed. Here is the difference between the new and old mark-up:
1. Header, Footer, and Content tables are wrapped with div tags
2. We’ve created one more fake scroll (x-scroll) that we’ve put under all these tables
3. JavaScript synchronizes scrolling of header, footer, content tables and fake scroll.

By: raj borkar

raj borkar — Tue, 30 Mar 2010 12:18:21 +0000

hello sir I need to table scrolling with fixed header and footer .
how can set header and footer
please suggest

By: Greg

Greg — Thu, 18 Feb 2010 14:10:17 +0000

First this method is currently the best way to make a table scroll w/fixed header, but…

Has anyone tried a scroll wheel with this demo? IE scrolls smooth while Firefox and Chrome are slow/jumpy. And if you use the scroll wheel as a button, it works in IE, Chrome, but not Firefox. Of those who answered ‘yes’, any idea how to fix it?