1

Problem:

I have a table that is too large to be a liquid style element for mobile. My solution was to make the overflow-x: auto. Works great and is pretty much how spread sheets on mobile apps work. One problem, the table can be confusing to read with the header being within the offset-y portion. I sometimes find myself scrolling back up just to see what column of data I'm looking at.

Question:

Is there a way to keep the table header in a fixed position within the table itself using CSS/JS - jQuery so that when the user is scrolling through the data, the header is always showing just like you would expect it to be in a mobile app? (Numbers for mac also does this). I don't mind using CSS3 since this is for mobile.

Other Things That Have The Same Behavior

  • Apple Numbers When you scroll down and the headers should be out of view, they stay fixed until you pass up the table.
  • iPhone Instagram App when scrolling through feed, the user's header stays in view until new post shows up.
  • iPhone Contacts App When scrolling through All Contacts the letter section you're in stays on top until a new letter shows up.

I just want to make sure you guys know what I'm talking about because I couldn't find anything similar to what I wanted to do. Not sure If I'm typing in the wrong search terms or what. But it's pretty much a hybrid style between float and fixed.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Philll_t
  • 4,267
  • 5
  • 45
  • 59

2 Answers2

2

This is what you're looking for: https://css-tricks.com/persistent-headers/

It's been done many times before.

gautsch
  • 774
  • 6
  • 11
2

Code drops has an excellent article on making the table headers fixed while scrolling.

The solution is based on JQuery and it works for both, row heading and column heading

Sticky Table Headers & Columns

Ashesh
  • 3,499
  • 1
  • 27
  • 44