#66: Table Styling 2, Fixed Header and Highlighting

Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever JavaScript.

I was intrigued by this until I decided to fire up the demo in IE6… fail. Until IE is no longer relevant, techniques like this are only valid on sites that have specific requirements (only use a “modern” browser) for it’s users – in corporate environments (one of the main holdouts for IE6) and for clients who do not want to shut out any potential customers, this technique is useless.

You run through all tds to add an ref with the column count, thats not necessary cause there is the DOM cellIndex property which told you the column count starting by 0. Btw you could using modulo (i%6) instead of setting your counter to 0 every 6 steps.

Here’s a challenge though:
For a page containing more than one table (plus text), make the header stay fixed at the top of the page as long as the table is still visible.
Or staded simpler: only fix the header when we scroll past it, but at least the last row is visible..

Perhaps I’ve been doing things wrong for the last 15 years, but I thought was to contain a group of elements. :)

Everything you demonstate here (very nice btw) can and I think should, be done with and if you want to go even more semantic, use to contain the last 3 since they appear to have similar, but grouped significance.

I really like the idea of a scrolling table so that the headers are always visible.

I tried to use this approach but without the header image but my just collapses. Is there a way this approach can be used without the image header (ie just textual header row) and so that the columns line up with the columns in the .

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.