Scrollable HTML table with top row and left column frozen

Question

Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of this is: Google Squared

I tried to reverse engineer the code for the google squared table, but I have been unsuccessful so far.

Note: I need the ability to FREEZE the TOP ROW and the LEFT COLUMN at the same time.

The link is broken. Can you provide a new one, because I'm really curious what the practical value is of such a table. — Frank Conijn - Support Ukraine
– Frank Conijn - Support Ukraine, Commented Jul 4, 2014 at 11:06

anschauung · Accepted Answer · 2013-07-31 19:53:54Z

3

There's a working example at http://ajaxian.com/archives/freeze-pane-functionality that should be easy to duplicate. Be sure to note the comments -- many of the users have made helpful suggestions for improving the script.

Per @Nirk's request, a direct link to the active demo is at http://www.disconova.com/open_source/files/freezepanes.htm.

edited Jul 31, 2013 at 19:53

answered Jul 8, 2009 at 23:06

anschauung

3,7683 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niczak Over a year ago

Has anyone found a better way of doing this? I am working with some HUGE datasets and thus the tables contain a lot of data, cloning that data up to 4 times is just plain not going to work. Does jQuery have any methods for achieving this same end?

anschauung Over a year ago

I linked to the article intentionally -- the comments provided a lot of useful improvements that the poster should consider, IMO.

Chetan S · Accepted Answer · 2009-07-08 22:39:48Z

Go with a basic structure like this-

table row column (blank) column table (1 row high, column headers) row column table (1 column wide, row headers) column div (fixed height & width, overflow auto) table (actual data)

Set a fixed table-layout and specify column widths in pixels explicitly. You should be able to achieve the same effect.

What if you want to let the the cell content determine cell dimensions (i.e. use the default table-layout)?

realcals · Accepted Answer · 2009-08-22 09:07:48Z

i have a version of this in use (for a Gantt-chart style display).

it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.

you need to work hard to get the cells to match sizes with the ones they match up to ( table layout-fixed can help achieve this).

The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.

You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...

As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.

hth

usoban · Accepted Answer · 2009-07-08 22:25:09Z

-1

If you use jQuery there's a lot of plugins for tables with fixed head.

answered Jul 8, 2009 at 22:25

usoban

5,47830 silver badges42 bronze badges

Comments

Thinker · Accepted Answer · 2009-07-08 22:57:01Z

-1

You need Scrollable (jQuery plugin)

Demo is here

answered Jul 8, 2009 at 22:57

Thinker

14.5k9 gold badges42 silver badges56 bronze badges

1 Comment

tfwright Over a year ago

demo was broken in my browser (chrome)

Collectives™ on Stack Overflow

Scrollable HTML table with top row and left column frozen

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Linked

Related