views:

3136

answers:

5

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.

A: 

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

usoban
A: 

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 Sastry
What if you want to let the the cell content determine cell dimensions (i.e. use the default table-layout)?
allyourcode
A: 

You need Scrollable (jQuery plugin)

Demo is here

Thinker
+2  A: 

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.

anschauung
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?
Nicholas Kreidberg
A: 

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