I need help creating a spreadsheet similar to Google Docs Spreadsheet or Excel, where there is a table full of data. How can I make it so that when a user scrolls vertically, the first row stays fixed, and when they scroll horizontally, the first column stays fixed? I'm not interested in using a plugin, just wondering how to achieve this using HTML/CSS. I've been studying the code for Google Docs Spreadsheet, but haven't been able to figure it out. Can someone please provide a simple example?
For instance:
Example: http://jsfiddle.net/tYUwd/2/
In the jsFiddle link provided, I would like the .row-header
elements to stay fixed when scrolling horizontally, and the .column-headers
to remain fixed when scrolling vertically.