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

Comments

  1. User Avatar
    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. User Avatar
    Kevin

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

  3. User Avatar
    spate1y

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

  4. User Avatar
    Didi

    what about IE?

  5. User Avatar
    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.

    • User Avatar
      Jon
      Permalink to comment#

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

  6. User Avatar
    Landon

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

  7. User Avatar
    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. User Avatar
    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. User Avatar
    Roflo

    Nice.

    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?

    -R

    • User Avatar
      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

    • User Avatar
      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. User Avatar
    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:

    http://pastie.org/533065

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

  11. User Avatar
    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;
    $(‘colgroup’).each(function(){
    i++

    });

    You can use:

    $(‘colgroup’).each(function(i){
    // now you have `i` starting from zero

    });

  12. User Avatar
    paul

    don’t stop the screencasts!
    they are awesome!

  13. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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.
    Steven

Submit a Comment

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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag