jQuery固定表頭和表的固定列，單元格的寬度可能會有所不同

Question

這個問題已經問了很多時間了，我嘗試了很多來自堆棧溢出的解決方案，其中包括下面提到的問題1和問題2中提到的幾個，但是當表寬度是動態的時，它們似乎都不起作用。是元素行。

我的表結構使用另一個jquery插件jqueryTreeTable插件。 而且結構有點復雜。 看起來像這樣 ，我在這里需要的是將其標頭固定在水平滾動上，並固定一個列用於水平滾動，因為內容可能具有水平滾動條。

Answer 1

適用於表的有用jQuery插件 （ 包括 可調整 大小的列和固定的標頭 ）

• 彈性體
• 英格麗
• 表固定頭
• jQuery網格

Answer 2

我在Internet上找到了該解決方案，但是找不到找到的參考，因此我不得不進行很多更改。 請參閱以下代碼中的注釋以了解我添加的更改。 這適用於浮動標頭部分。

           $("table.tableWith-FloatingHeader").each(function() {
                $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");

                var originalHeaderRow = $("thead", this);
                originalHeaderRow.before(originalHeaderRow.clone());
                var clonedHeaderRow = $("thead", this);

                clonedHeaderRow.addClass("tableFloatingHeader");

                originalHeaderRow.addClass("tableFloatingHeaderOriginal");
                if(originalHeaderRow.hasClass("tableFloatingHeader")){
                    originalHeaderRow.removeClass("tableFloatingHeader");
                }

                clonedHeaderRow = $('.tableFloatingHeader');
                clonedHeaderRow.css("position", "absolute");
                clonedHeaderRow.css("top", "0px");
                clonedHeaderRow.css("left", $(this).css("margin-left"));
                // originally visibility hidden only was used but it didn't work for me so I had to use display:none
                clonedHeaderRow.css("visibility", "hidden");
                clonedHeaderRow.css("display", "none");

                var tableBody = $('tbody', this);
                tableBody.css('display', 'table');


            });


            UpdateTableHeaders();
            $(window).scroll(UpdateTableHeaders);
            $(window).resize(UpdateTableHeaders);


            // since my table's width could be changing on click to the td (expand/collapse of td leads to change in width so to fix the width for the head and body UpdateTableHeader function is called.
            $("table.tableWith-FloatingHeader").undelegate("td", "click");
            $("table.tableWith-FloatingHeader").delegate("td", "click", function() {
                UpdateTableHeaders();
            });


// functions **



// function to fix the table head's width and it's visibility
    function UpdateTableHeaders() {
        $("div.divTableWithFloatingHeader").each(function() {
            var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
            var floatingHeaderRow = $(".tableFloatingHeader", this);
            var offset = $(this).offset();
            var scrollTop = $(window).scrollTop();
            if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
                floatingHeaderRow.css("visibility", "visible");
                floatingHeaderRow.css("display", "block");
                floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");
                if(!floatingHeaderRow.hasClass('visible'))
                    floatingHeaderRow.addClass('visible');
                originalHeaderRow.css("visibility", "hidden");
                originalHeaderRow.css("display", "none");

                // Copy cell widths from original header
                $("th", floatingHeaderRow).each(function(index) {
                    var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
                    $(this).css('width', cellWidth);
                });

                // Copy row width from whole table
                floatingHeaderRow.css("width", $(this).css("width"));
            }
            else {
                originalHeaderRow.css("visibility", "visible");
                originalHeaderRow.css("display", "block");
                floatingHeaderRow.css("visibility", "hidden");
                floatingHeaderRow.css("display", "none");
                floatingHeaderRow.removeClass('visible');
                floatingHeaderRow.css("top", "0px");
            }
// since my problem was when I cloned the original head and hide it, it  wasn't able to sync with the change in width of the table body. I had to sync the width of the each of the tbodys tds with theads tds. 
            updateHeaderWidth();
        });
    }

// function to sync width for the table head with table body. 
    function updateHeaderWidth() {


        $("div.divTableWithFloatingHeader").each(function() {

            var table = $(this);
            var widths = [];
            var i = 0;

           // iterate through each of the tbodys first trs tds to get their width
            table.find('tbody .first-row td div.width-set').each(function(){

                widths[i] = $(this).width();
                i ++;
            });

           // iterate through theads ths add an element with the same width to both first tds and ths
           // note: step to add element to both the element is required else it would go a little out of sync
            table.find('thead.tableFloatingHeaderOriginal th.width-get, thead.tableFloatingHeader th.width-get').each(function(){

                i = $(this).attr('data-col-number');
                var width = widths[i];
                var widthKeeperTag = '<div style="width: ' + width + 'px; height: 1px;"></div>';
                if($(this).find('div').length){
                    $(this).find('div').replaceWith($(widthKeeperTag));
                }else{
                    $(this).html($(this).html() + widthKeeperTag);
                }
            });
        });
    }