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

• javascript
• html-table

• Possible duplicate of: stackoverflow./questions/1030043/… – Quasdunk Commented Sep 15, 2011 at 15:30
• Not a duplicate. I need BOTH the first row and the first column to stay visible. I could't find an answer to this on stackoverflow. – radonys Commented Sep 15, 2011 at 15:34
• 1 There are a lot of working JS solutions out on the web. For example datatables – what you are searching for is a bination of the "FixedColumns" and the "FixedHeader" plug-ins (if using jQuery-datatables). BTW: your solution flickers heavy while scrolling. – feeela Commented Sep 15, 2011 at 15:44
• Note that if you keep scrolling in your example the result flips from bottom of table back to top – mrtsherman Commented Sep 15, 2011 at 19:10
• @mrtsherman You're right, the code is not perfect... – radonys Commented Sep 15, 2011 at 20:52

2 Answers 2

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)