Javascript Jquery固定表头和固定列对于表，单元格的宽度可能会有所不同

这个问题已经被问了很多次了，我已经尝试了很多来自堆栈溢出的解决方案，包括下面提到的几个 , 但是，当表宽度是动态的，元素行也是动态的时，它们似乎都不起作用

---

我的表结构使用另一个jquery插件jqueryTreeTable插件。而且结构有点复杂。它看起来像，我需要在这里有它的标题固定在水平滚动，并有一列固定为水平滚动的内容可能有水平滚动条

用于处理表的有用jQuery插件（包括可重新调整大小的列和固定标题）

---

我在互联网上找到了这个解决方案，但是我找不到我找到的参考资料，我不得不做了很多修改。关于我添加的更改，请参考下面代码中的注释。这适用于浮动标题部分

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

$（“table.tablewithfloatingheader”）。每个（函数（）{
$（this.wrap（“”）；
var originalHeaderRow=$（“thead”，this）；
originalHeaderRow.before（originalHeaderRow.clone（））；
var clonedHeaderRow=$（“thead”，this）；
clonedHeaderRow.addClass（“tableFloatingHeader”）；
原始headerRow.addClass（“tableFloatingHeaderOriginal”）；
if（原始headerRow.hasClass（“tableFloatingHeader”））{
原始HeaderRow.removeClass（“tableFloatingHeader”）；
}
clonedHeaderRow=$（'.tableFloatingHeader'）；
css（“位置”、“绝对”）；
clonedHeaderRow.css（“top”，“0px”）；
css（“左”和$（this.css（“左边距”）；
//最初只使用了“可见性隐藏”，但它对我不起作用，所以我不得不使用“显示：无”
css（“可见性”、“隐藏”）；
css（“显示”、“无”）；
var tableBody=$（'tbody'，this）；
css（'display'，'table'）；
});
UpdateTableHeaders（）；
$（窗口）。滚动（UpdateTableHeaders）；
$（窗口）。调整大小（UpdateTableHeaders）；
//由于我的表格的宽度在点击td时可能会改变（td的展开/折叠会导致宽度的改变，因此需要调用head和body UpdateTableHeader函数来固定宽度。
$（“table.tablewithfloatingheader”）。取消删除（“td”，“click”）；
$（“table.tablewithfloatingheader”）.delegate（“td”，“click”，function（））{
UpdateTableHeaders（）；
});
//功能**
//函数用于固定桌面的宽度及其可见性
函数UpdateTableHeaders（）{
$（“div.divTableWithFloatingHeader”）。每个（函数（）{
var originalHeaderRow=$（“.tableFloatingHeaderOriginal”，此项）；
var floatingHeaderRow=$（“.tableFloatingHeader”，this）；
var offset=$（this.offset（）；
var scrollTop=$（窗口）.scrollTop（）；
如果（（scrollTop>offset.top）&&（scrollTop