Pushpin Header – A Simplified Data Grid With A Stationary Header.
Is table pagination not you’re cup of tea? It’s certainly not mine. Because of this I recently decided to sit down and re-work the vertical scrolling table example from cssplay.co.uk in order to produce a stationary table header solution for scrolling tables. I did so because paying up to 3k or having to including a ridiculous amount of javascript into a webpage is not an acceptable solution. Truth be told I’m not sure what I conjured up is really all that acceptable either. However it’s a couple of steps in the right direction. So with that in mind I give you the Pushpin Header technique. It should be noted that if I had to pick an off the shelf solution I’m pretty sure I’d would go with the dhtmlxGrid. Its price and browser support make it an unmatched solution.
Pushpin Header is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable. An example should clarify the purpose of this technique.
Now for the bad news! Browser support for this technique includes Firefox/Mozilla (Macintosh and Windows) and IE 6 (acceptable derogation in IE 5 & IE 5.5). Safari suffers from a spacing issue which I’m still trying to remedy.
Along with a less than desirable list of supported browsers this technique requires an enormous amount of CSS customization and table of data with specific table cell widths. Not exactly the ingredients for a great solution, I know.
At any rate, check it and let me know if you have any thoughts on how I could improve the CSS to allow for additional browser support. BTW – Try clicking the linked text in the table header, sorting remains possible with this technique (sorting provide from frequency-decoder with a little hacking from me to get the header text to function like a link).
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
Yup…a bug with the sorting is biting at me!
I guess the CSS still works, I'm just not so sure about the sorting anymore.
Looks sweet. Nice job.
Yo Cody, you are da man!
This is great, great stuff indeed. I have a client at work that asks for this functionality at every given opportunity.
I’ve tried explaining (to no avail) that current solutions are either expensive or IE centric but he doesn’t want to listen (In fact, I get the distinct impression he thinks I’m talking some sort of Martian dialect during conversations of this type).
I can now tell him that his dreams have come true and that his nasty ol tables can have static headers (luckily for me, it’s an Intranet so Safari doesn’t figure in the support matrix).
One question though, is it possible to define % and not px values for the TH and TD widths?
F.Y.I, you’ve spelt/spelled Disabled/Enabled incorrectly on the demo (yes, I’m that big of an idiot that I had to point it out!)
@frequency decoder – Not sure exactly where the spelling error you are speaking about is located. Could you be a little specific?
Also, I didn’t try percentages…I would imagine that it would work as long as all the percentages have the same width. However I know that if the intent is to make them flex I don’t think that will work.
No problem,
It’s the “status” column – the word enabled is spelt “enalbed” and disabled, “disalbed” (and now I feel ten times more of an idiot for actually pointing it out!).
As for percentages, it was a “lazy” question. The current app already stipulates TD’s in percentages, I just wanted to find out if I needed to change the CSS!
@frequency decoder – Got it, and yes…go with the px widths. I think it will save you headaches in the long run.
When I have scrolled down and then click on a header to sort, the header jumps up to the top of the browser window (FF 1.5.0.1).
Not sure where you get the idea that mine uses javascript. But all the examples on my site are pure CSS only.
Stu: I think you misinterpreted. He’s linking to the ones who’ve used excessive JavaScript (of which yours is NOT one of them).
@Snokke – Yup, see my first comment. I’m trying to figure out a solution in-between sessions at sxsw. I'll keep you posted.
@Stu Nicholls – See Jonathan Snook’s comment below yours. Also, sorry for the confusion I’m sure I could have done a better job noting that I used you’re example as a starting point for my own technique. Of course my goal was to get the header inside the scroll unlike the example on CSSPlay. Also, I am using a negative margin in my example instead of padding.
@Jonathan Snook – Thanks. I appreciate the clarification.
Ok, it’s my age. I get easily confused ;)
Extremely broken in Opera, FYI.
@X – Yup, like I said in the post. The bad news is the browser support.
With FF1.5 on linux. I first got to the example with javascript disabled, the “First Name” header was under the “Shopper Name”, all the other header being on the same line as the “First Name” one, so it was really strange.
I activated javascript and reloaded the example and everything was ok. I thought, doh, this is obtrusive js. But then I read the article and you say it is pure css.
So in doubt, I go back to the example and disable js again. And… hum, it works fine, no way to have the previous behaviour before.
So it seems to work well after all ;)
Hey, great post! K, thx – bye.
@Kartooner – Don’t call me K.
I don’t think he was. He was saying “okay, thanks.”
nice bit of work. Another version worth considering:
http://www.agavegroup.com/?p=31
It handles a footer, and requires on less wrapper div. Perhaps these two methods combined…
Very nice piece of work. You’re absolutely right, table sorting and pagination is never a fun thing to deal with. This seems like it is on its way to being a solid solution.
I do alot of table work here at work and this kind of functionality is a real requirement for many clients who expect an Excel-like interface. The problem I can see with this technique is window fluidity (try sizing the browser window so the horizontal width is less than the width of the table). I think to make real gains in this area, someone at W3 needs to give serious loving to the table model (I think the HTML module is fine; it’s the CSS that needs attention). Until then, it’s going to be ugly “every which way but loose”.
Beautiful choices of colours for this technique published quite a while ago in June 2002
http://lists.w3.org/Archives/Public/w3c-wai-ua/2002AprJun/thread.html#193
http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html
@Karl – Actually I think the premise is the same but the technique I used is original. And if were simply talking about scrollable data with a stationary header I’m sure the technique is much older then 2002.
Bravo! Well done indeed! The best I’ve seen yet. A true masterpeice.
– no seriously, good work man.great job. I tried this script.
I was experimenting with the width and here is the question
I made the width as 100% in the css file and i removed the width from the td column from the thead and tbody.
The header cell and the tbody cell widths do not match because they have different length contents.
Is there a way to connect the header cell with the tbody cells without having to hardoce the widdth of td tags
@Hariharan – I believe the width is required to match up the columns. I never really figured out a way around this.
thanks for the quick response.
Just curious have u tried to make the table scroll to the right when you have a table with lots of columns.
Interesting
Hello,
Thanks for this very efficient and easy to install method.
But there is a bug when the header is made of two rows. Do you have any idea to fix this problem.
Thanks in advance,
Fred
Hello,
Thank you very much, it had over came the big issue of select box overlaping table header.
Thanks,
Sarvang
Hello I want to use this feature in my page. may i know from where i can get this javascript and css.
Manish