CODEWITHSUNDEEP
javascriptcssfixed-header-tables
Philll_t
Philll_t

Reputation: 4437

Fixed header within table when scrolling the table

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

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.

Upvotes: 1

Views: 176

Answers (2)

Ashesh
Ashesh

Reputation: 3589

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

Upvotes: 2

gautsch
gautsch

Reputation: 824

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

It's been done many times before.

Upvotes: 2

Related Questions