Grow your CSS skills. Land your dream job.

#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. 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. 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. How could you go about sorting each column or would this be impossible with this kind of styling?

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

    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

    • 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

    • 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. 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. 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. don’t stop the screencasts!
    they are awesome!

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".