0

I'm trying to make an excel type grid with a heading along the top and labels down the left hand side. I want the content to be scrollable but both the headings along the top and labels down the left hand side visible at all times. Is this possible? E.g.

A B C D E F G 1 2 3 4

What I want is that you to be able to scroll across but keep the numbers at the side... so scrolling left would show:

B C D E F G H 1 2 3 4

But I also want it so you can scroll down and still see the headings at the top:

B C D E F G H 2 3 4 5

there could be data each of the cells that needs to remain correctly lined up with its heading and left hand label.

One or the other is easy using overflow: auto on a container, but is it possible to have both?

Is this possible using pure CSS or does it require javascript?

I can position: absolute either the lefthand labels, or the header labels. This causes a problems: If the header is absolutely positioned then scrolling the table left does not affect the header. If the left hand column is absolutely positioned scrolling the table down does not affect the left hand column.

edit: Here's what I have so far: http://jsfiddle.net/sts5uh6s/2/ This works for the left hand labels and the top heading, but the left hand labels dont scroll with the content

Tom B
  • 2,735
  • 2
  • 24
  • 30

1 Answers1

1

Your current code would be helpful here so we can see what you've got currently, the route you're attempting - then we can build on that.

However just from your explanation above, and without coding it from scratch myself - I would suggest you have one container DIV with overflow:scroll and then I would have two divs: one across the top and one down the left with position: absolute

However to get the 'cell-by-cell' scrolling behaviour of excel I think you're going to have to look at using something other than CSS.

Bruford
  • 471
  • 1
  • 3
  • 13
  • thanks, I've added a jsfiddle with what I have so far – Tom B Aug 19 '14 at 14:06
  • So to answer your question: this is not possible with CSS AFAIK there do seem to be similar questions out there though such as this one which could guide you through the script required: http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y – Bruford Aug 19 '14 at 14:09
  • Thanks, I was hoping for a CSS solution. It needs a little tweaking but here's what I've got with javascript http://jsfiddle.net/sts5uh6s/4/ – Tom B Aug 19 '14 at 14:49
  • I set up a git repo for a solution if anyone stumbles across this https://github.com/TomBZombie/jGrid – Tom B Oct 09 '14 at 16:35