I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed
which could be used for this purpose. I've put together a demo which isn't 100% perfect when it es to lining things up, but it demonstrates how to use it for your application.
DEMO: http://wecodesign./demos/stackoverflow-7433377.htm
For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)