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.

Answer 1

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.

Answer 2

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.