Add sticky headers to tables [#112605]

When scrolling through long tables, it is hard to know which column is what. This patch remedies this by letting the table header scroll along when it reaches the top of the browser view. Multiple tables per page are supported (the header will disappear if you scroll beyond the end of a table).

It uses "position: fixed", so it does not lag behind the scrolling and does not slow down rendering (much). This does mean that it won't work in at least IE6, and maybe IE7. But, I think this feature is too handy to not have, so we could just disable it for IE6 users (their loss). For now, no browser checking is provided so we can test it.

Try it on e.g. the watchdog table. Note that the theme can be adjusted to style the fixed header appropriately:

thead div.sticky-header {
  background: #fff;
  border-bottom: 2px solid #d3e7f4;
}

However, in order to keep the feature usable on all themes, I automatically set a white background in system.css.

Tested on Safari, Firefox and Opera.

Patch is against "cvs up -D "01/23/2007" as HEAD is broken at the moment.

Comment	File	Size	Author
#12	sticky-table-header_3.patch	5.15 KB	Steven
#12
#11	sticky-table-header_2.patch	5.27 KB	Steven
#11
#3	sticky-table-header_1.patch	5.14 KB	Steven
#3
#1	sticky-table-header_0.patch	4.74 KB	Steven
#1
	sticky-table-header.patch	4.4 KB	Steven

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Steven CreditAttribution: Steven commented 25 January 2007 at 07:13

File	Size
sticky-table-header_0.patch	4.74 KB

Fixed some bugs:

Make the first cell as wide as the table (under the rest) to avoid 1-2 pixel gaps.
Set z-index to avoid some possible rendering bugs.
Deal better with changing window/font size.

Demo at:
http://www.acko.net/garland/?q=tracker

Note that it is not easily possible to make the entire header bigger if one or more cells wrap...

Comment #2

adrian CreditAttribution: adrian commented 25 January 2007 at 07:24

Just tested this in firefox. Very subtle, but very useful. I'd imagine this must be a big
usability boon for forms like the permission admin.

Comment #3

Steven CreditAttribution: Steven commented 25 January 2007 at 07:36

File	Size
sticky-table-header_1.patch	5.14 KB

Bugfix: reflow cells on resize. Due to the weird handling of onresize, there is some unavoidable delay here. Pffft.

Comment #4

Dries CreditAttribution: Dries commented 25 January 2007 at 14:52

Looks great. Especially for the permissions screen!

Comment #5

Dries CreditAttribution: Dries commented 25 January 2007 at 21:57

I looked at the code now, and it looks good. Clever trick, but hard to say if there is a simpler/shorter way to accomplish this (I'm not yet a jQuery expert, but I'm slowly getting there ;)).

Comment #6

Steven CreditAttribution: Steven commented 25 January 2007 at 23:21

The code is pretty lean... most solutions out there use "onscroll" to reposition the elements, and this causes it to lag behind. Because I use position: fixed, I don't need to move the header at all. I just show / hide it.

Comment #7

chx CreditAttribution: chx commented 26 January 2007 at 09:59

If by "HEAD is broken at the moment" you mean the menu patch then please reconsider. It indeed lacks a few visual aids and the navigation block is broken in some edge cases but it is totally useable for development and patches. In other words, you might need to type in a /edit into the location bar instead of clicking on 'edit' but once you land on a page, Drupal works.

Comment #8

Morbus Iff

they/them

CreditAttribution: Morbus Iff commented 26 January 2007 at 12:58

Firefox 2.0 on OS X against http://www.acko.net/garland/?q=tracker:

1) Grab your scroll bar and scroll down *quickly* and hold the click. Header doesn't show. Release click, header shows.
2) Grab the scroll bar and scroll up (quickly or not). Header goes all the way up, above the table. Eventually disappears, but pieces at a time (I see the first four columns disappear quickly, then Last post lags behind a beat). Depending on some circumstances, 1) is also repeatable upwards - scroll up quickly, hold the click, header remains shown at the top of the page (above the table). Release click, header disappears.

Mousewheel scrolling worked perfectly, same with page down and arrows.