jquery - 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 とは一致しません。短くなります。ご意見をお聞かせください！