New fixed header jQuery plugin

Hi, I just try to develop a plugin  based on jQuery to meet the problem of fixed header in HTML tables.

Browsing the web, I discovered many interesting plugins but many did not respond to certain issues (in particular, that a table could have a variable width) or, if they met, a lot of code was necessary to recalculate each time widths of cells, with observers, timeouts etc…

Let’s see the Demo

So I developed this plugin by focusing on resizing cells by the web browser engine.

This plugin is not very complicated, but I think it meets a certain way to the problem.

(take a look at the Documentation !)

Sorry for my english…

6 Comments

  • 1
    26 August 2010 - 13 h 53 min | Permalink

    great dude u r god man……..

  • 2
    27 August 2010 - 21 h 05 min | Permalink

    Wow this is very nice. Scrollable tables is a real problem with CSS and web browser idiosyncrasies. I’ve been using one for a while now and research them before. They all have their disadvantages such as not having headers lined up, having scrollbar issues, and when there’s only a few table rows that aren’t enough to fill the area – they stretch to fill it and look crazy. Your example looks very nice. I was hoping to do it without javascript but I just started using jQuery in my app so I may try it.

    • 3
      benjamin
      28 August 2010 - 14 h 22 min | Permalink

      Hi and thanks for your comment..

      You’re right, how comes a such usual and basic feature like fixing headers of HTML table is not natively implemented by the browsers.
      We are forced to rely on javascript to do this kind of thing, and it is not necessarily a good thing.
      However, I wanted to develop this plugin, trying to reproduce the native behavior of an HTML table, especially when resizing the browser or divs inside. We can have a table full page that resizes with the browser’s rendering engine and not through “events listenners”, which is why it is so fast!

  • 4
    Mickey
    5 September 2010 - 7 h 34 min | Permalink

    Hi, Benjamin!

    You plugin is nice, but it does not seem to deal with the situation when we have more than 1 row in THEAD.

    I have a table with content-heavy headers + colspans.

    I altered your code in this way to support it (I hope this is OK):

    function buildHeaders(table) {
    _headers = $(”);
    _headerscontainer.append(_headers);
    _headers.append(buildColgroup(nbcol));
    var thead = $(”);
    // NEW CODE
    $(‘thead tr’, $(table)).each(function () {
    var theadrow = $(”);
    $(‘th’, $(this)).each(function () {
    theadrow.append(this);
    });
    thead.append(theadrow);
    });
    // YOUR CODE
    // var theadrow = $(”);
    // $(‘thead th’, $(table)).each(function () {
    // theadrow.append(this);
    // });
    // thead.append(theadrow);

    _headers.append(thead);

    return _headers;
    }

    It seems to help.

    Strangely enough I could not find any actually working “fixed header” plug-ins lately: or the plug-in wasn’t working at all, or it wasn’t working with colspans in THEAD or some other problem. Yours is working!

    Thank you!
    Mickey
    (sorry for my bad English)

  • 5
    21 February 2011 - 2 h 46 min | Permalink

    Hi.. Great! :)

  • 6
    af
    4 April 2011 - 15 h 28 min | Permalink

    a heartfelt thanks!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>