1

I'm trying to freeze both the row and column header of a table which is inside of a fixed-size div scrollable div (overflow: auto). You can see an example of the table/div setup here

I've seen some libraries that are meant to do this, but none have been working as I'd expect. I am able to work with fixed-size elements, so if there is a solution with that, that'd be okay.

So far, I've tried:

On the header row:

  • Use position: fixed for thead and then explicitly specify the width of the columns. This feels like it wants to work, but since the div is scrollable horizontally, when you scroll horizontal the headers stay put... I think if the div didn't scroll horizontally, this would work: example
  • Tried most of the answers/plugins from this question: Freeze the top row for an html table only (Fixed Table Header Scrolling)

On the header column:

So, to restate the question, in my jsFiddle, I'm expecting the numbers to stay visible the entire time, and the blocks to scroll. So, if you're at the very bottom right of the div, the visible header above it should be 12 and the visible header to the left of it should be 17.

Community
  • 1
  • 1
Tom
  • 2,180
  • 7
  • 30
  • 48
  • I have figured out how to make the header fixed, but i'm working on how to keep the 1 2 3 4 header width the same.@Tom – Harry Aug 21 '14 at 19:20
  • @Harry, if it helps, you *can* set the header widths to a fixed size (i.e., `width: 100px;`) -- same with the heights for the columns. – Tom Aug 21 '14 at 19:23
  • I can show you the fiddle, so that i have done. is that what you want? obv ignore the header width at present. http://jsfiddle.net/nb0oa15s/1/ – Harry Aug 21 '14 at 19:27
  • That's the idea I'm looking for, but it's not going to work. Once you make the width of the headers correct, you will notice that as you scroll to the right they stay in the same place (i.e., the grid below them scrolls, but the numbers don't remain over their respective block -- they stay put) – Tom Aug 21 '14 at 19:29
  • yeah i get what you mean, i suppose you will have to add some fixed positioning over them too. – Harry Aug 21 '14 at 19:34
  • For anyone reading, here is an example of what I mean, updated @Harry fiddle http://jsfiddle.net/nb0oa15s/2/ – Tom Aug 21 '14 at 19:37

0 Answers0