I have two tables, first one serves as a search functionality utilizing datepicker, and the second holds the `thead` and `tbody` which holds the actual header and rows for my data. I tried following <http://jsfiddle.net/wLcjh/255/> 

```
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());
console.log(tableOffset);
console.log($header);
console.log($fixedHeader);
console.log($fixedHeader.is(":hidden"));

$(window).bind("scroll", function () {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();

        $.each($header.find('#tr1 > th'), function (ind, val) {
            var original_width = $(val).width();
            $($fixedHeader.find('#tr1 > th')[ind]).width(original_width);
        });
    }

});

```

However, it had no effect on my page whatsoever. Is it even possible to accomplish?