12

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.

Jon
  • 2,129
  • 7
  • 23
  • 31

5 Answers5

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.

anschauung
  • 3,697
  • 3
  • 24
  • 34
  • 3
    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? – niczak Oct 16 '09 at 20:48
  • I linked to the article intentionally -- the comments provided a lot of useful improvements that the poster should consider, IMO. – anschauung Jun 26 '13 at 18:00
1

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.

Chetan S
  • 23,637
  • 2
  • 63
  • 78
0

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

realcals
  • 1,692
  • 2
  • 19
  • 20
-1

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

usoban
  • 5,428
  • 28
  • 42
-1

You need Scrollable (jQuery plugin)

Demo is here

Thinker
  • 14,234
  • 9
  • 40
  • 55