Lock table headers when scrolling (ColResizable)

Question

I am not very familiar with HTML, CSS and Javascript, and yet I am tasked with creating a table system that will allow the user to resize table columns but also have said headers fixed to the top of the section the table is displayed in when the user scrolls the table.

I know this sounds confusing, so i created a Fiddle that can accurately represent what I have currently and hopefully where it needs to be updated.

I have settled on using the plugin JSColResizable found here: http://www.bacubacu.com/colresizable/ and have set it up in the fiddle allowing the table to be resized. I have also wrapped the table in a div that only allows 300px height to be displayed at any time.

When the user mouses over the table division and scrolls down, the table headers scroll outside of the division making it difficult for users to relate which column was what. I simply need the table entries to continue to work the same way and scroll outside the div, yet allow the headers to remain static at the top of the div so that they can more easily be related to the columns.

If anyone has experience with this issue, I would greatly appreciate any help that can be offered.

Answer 1

You have to write a little jquery for it, and a class in css

Here is the Working Fiddle of what you want.

I have written some jQuery code for it you can use it.

jQuery

$(function(){
$.fn.fixMe = function () {
    return this.each(function () {
        var $this = $(this),
           $t_fixed;
        function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
        }
        function resizeFixed() {
            $t_fixed.find("th").each(function (index) {
                $(this).css("width", $this.find("th").eq(index).innerWidth() + "px");
            });
        }
        function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if (offset < tableOffsetTop || offset > tableOffsetBottom) {
                $t_fixed.hide();
            }
            else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) {
                $t_fixed.show();
            }
            var tboffBottom = (parseInt(tableOffsetBottom) );
            var tboffTop = (parseInt(tableOffsetTop));

            if (offset >= tboffBottom && offset <= tableOffsetBottom) {
                $t_fixed.find("th").each(function (index) {
                    $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
                });
            }
        }
        $(window).resize(resizeFixed);
        $(window).scroll(scrollFixed);
        init();
    });
};

$("table").fixMe();
});

Hope this helps you.

Answer 2

There is currently no native way for a table to have sticky headers and footers. All libraries that provide that functionality use divs or other tags to achieve that. That being said, I would probably not try to reinvent the wheel here. You could give SlickGrid a try - it is pretty stable and works great even with huge data-sets