Frozen table header inside scrollable div

Question

I\'ve three divs. Header, central and footer. There is a table in central div (gridview) which is almost always longer than outer div. So I\'ve made this div scrollable vert

Answer 1

I haven't tested this, but perhaps you could generate the table twice, once in the header and once in the scrolling div. Then in the header, make all the rows except the heading row invisible. Perhaps with 'display: none' or set their height to zero.

Answer 2

What you actually want to be doing is making the <tbody> of the data table scrollable, so the <thead> and <tfoot> will remain naturally fixed.

Whilst this is trivial for FF et al:

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

IE has severe and complex issues with tbody in general. It can be solved with expressions but it's non-trivial, and specific to the design.

Answer 3

Here's a nice solution (mostly CSS) which uses fixed width columns: http://www.imaputz.com/cssStuff/bulletVersion.html

And here's a bit of jQuery code to fix cell-widths when cell contents take more width than the fixed width:

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
  type="text/javascript"></script>
<script>
$(function() {
  $('div.tableContainer').each(function() { // for each table
    var div = $(this);
    var widths = [];
    var changed = false;
    $('table>*>tr', div).each(function(tr_i) {
      $(this).children().each(function(i) {
        var w = $(this).width();
        if (w > widths[i]) {
            widths[i] = w;
            changed = true;
        }
      });
    }).each(function(tr_i) {
      if (changed)
      $(this).children().each(function(i) {
        var width = widths[i];
        // add some width for scrollbar
        if (tr_i == 0 && changed && i == widths.length-1) width += 16;
        // insert a div to ensure width
        $(this).append('<div style="width:'+width+'px; height:0px">&nbsp;</div>');
      });
    });
    div.width(div.children('table').width()).css('overflow-x', 'hidden');
  });
});
</script>

The output is a bit off in IE when using a non-strict DTD. Tweak the widths in the CSS if you can't use standards mode.

Note that the jQuery code increases the table width at the end, and disables the horizontal scrollbar. You may or may not want that.

Answer 4

You may try the jQuery plugin Stupid Fixed Header. The technique is basically the same: clone a header and put it on top of the table layer.

Answer 5

This solution works using CSS in Firefox and the other Gecko browsers, and CSS expressions in IE.

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

The header and footer do not stay fixed in Opera or Safari/Chrome, but the whole table is scrollable so it is usable. Note that the columns are given percentage widths in the author's example, but they can be removed.

If you want to experiment with Opera/Safari/Chrome support, look at giving the tbody display:block and go from there.

Answer 6

Take a look at YUI Data Table if you are looking for a comprehensive cross-browser implementation. I believe this is done by creating another table with matching column widths.

There appears to be tricks required to fix column widths. If I recall correctly, Firefox requires <col/> tags to be present.

In any case, there were many tricks employed in YUI DataTable (50k lines). You'd be well advised to look at it and decide how far you'd like to go on your own with this.