#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.

Links from Video:


  1. Chris

    Nice vid Chris! I am not a fan of tables, but using them this way sure makes it easier! I love the power that JQuery provides! Keep up the good videos!

    ~ Chris

  2. Kevin

    Why is this screencast not in iTunes? I can’t wait to see this great screencast on my iPod.

  3. spate1y

    Nice vid Chris! While following your video, I created a table for one of my clients.

  4. Didi

    what about IE?

  5. Joyrex

    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.

    • Jon
      Permalink to comment#

      great tutorial, keep ’em coming… but Joyrex is spot on regarding IE 6.

  6. Landon

    How could you go about sorting each column or would this be impossible with this kind of styling?

  7. Andreas

    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.

  8. Jean

    For IE7, if you add   inside each table cell, they won’t collapse and you can see the highlighting working. However, I am still working on getting the position fixed on the header to work in IE7

  9. Roflo


    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..

    Is it even possible?


    • Cipa

      Should be easy.
      Just detect the y position of the end of the first table vs the y scroll position. If the the end of the table – header height is reached by the scroll position hide the first header.

      For the second table. If scroll position = second table header y position make the header flow.

      and so on

    • David Chambers
      Permalink to comment#

      Thanks for your suggestion, Cipa. I implemented this just a few minutes ago using Prototype, and am extremely pleased with the result.

      It was a real bonus to discover that if the page is reloaded while “scrolled”, the “scroll” event is automatically fired. Handy!

  10. Vasili

    I was waiting for you to post this because I wanted to see how you did the column sorting. This is how I did mine:


    I’ve never heard of colgroup, thanks! :)

  11. Ionut Staicu

    Nice vid!

    I code for two years or so and I never used colgroup (even if i know about his existence). Anyhow, instead of

    var i = 1;


    You can use:

    // now you have `i` starting from zero


  12. paul

    don’t stop the screencasts!
    they are awesome!

  13. Greg McAusland

    Slightly OT, but in regards to your jquery, is $(function() {…. the same as $(document).ready(function() {…. or is it something that occurs even before that?

  14. Ignacio Ricci

    Actually, elements that have position fixed don’t rely on a parent element. Even if it’s parent has a position relative.

    If you don’t give the fixed-positioned element a coordenate, It will first appear in it’s original place (as if it were static) and then move along together with the scrollbar.

  15. nk
    Permalink to comment#

    i need to learn about css. who can help with the necessary tools for me to start. thanks for your assistance.

  16. Michael
    Permalink to comment#

    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.

  17. Steven Woolston
    Permalink to comment#

    Hey guys

    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 .

    Thanks and keep up the good work.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.