2

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
radonys
  • 597
  • 1
  • 9
  • 20
  • Possible duplicate of: http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table – Quasdunk Sep 15 '11 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 Sep 15 '11 at 15:34
  • 1
    There are a lot of working JS solutions out on the web. For example http://www.datatables.net – what you are searching for is a combination of the "FixedColumns" and the "FixedHeader" plug-ins (if using jQuery-datatables). BTW: your solution flickers heavy while scrolling. – feeela Sep 15 '11 at 15:44
  • Note that if you keep scrolling in your example the result flips from bottom of table back to top – mrtsherman Sep 15 '11 at 19:10
  • @mrtsherman You're right, the code is not perfect... – radonys Sep 15 '11 at 20:52

2 Answers2

3

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 comes to lining things up, but it demonstrates how to use it for your application.

DEMO: http://wecodesign.com/demos/stackoverflow-7433377.htm

  • I will try your code, but I suppose it's working only with fixed sizes, margins, width, etc... although I'm not sure. I will give it a try. Thank you. – radonys Sep 15 '11 at 20:38
3

For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)

radonys
  • 597
  • 1
  • 9
  • 20