使用Jquery固定表头时样式已更改

Question

我想使用Jquery实现一个固定的表头。

请参阅此JSFiddle。

当用户向下滚动页面时，表头将保持固定位置。我使用以下方法来控制固定位置。

$(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");

我现在遇到的问题是当向下滚动页面时，修改了固定标题样式。它无法与其他tds对齐。它会变短。请指教！