style changed when using a Jquery fixed table header

Question

I want to implement a fixed table header using Jquery.

Please see this JSFiddle.

When user scroll down the page, the table header will remain fixed position. I use the following way to control the fixed position.

$(window).bind("resize.browsersize", function () {
    var topp = $('#header_scrol').offset().top;

    var height = $('#header_scrol').height();

    $(window).scroll(function (event) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        console.log('y value is ' + y);
        console.log('topp value is ' + topp);

        // whether that's below the position
        if (y >= topp) {
            // if so, ad the fixed class
            $('#header_scrol').css({
                position: 'fixed',
                top: 0,
                    'background-color': 'gray'
            });

        } else {
            // otherwise remove it
            $('#header_scrol').css({
                position: 'relative',
                top: $(window).height() + 'px'
            });
        }

    });

}).trigger("resize.browsersize");

The problem I have now is when scrolling down the page, the fixed header style is changed. It can not align with other tds. It become shorter. Please advice!