Jquery 浮动 Table Header - 边框折叠影响浮动 header 大小

Question

我正在使用这个 jQuery 使 table header 变粘。

(function($)
{
    $.fn.sticky = function()
    {
        var tableId = this;
        var tableWidth = $(tableId).width();
        var tableHeight = $(tableId).height();
        var thHeight = $(tableId).find("th:first").parent().height();

        var thWidthsArr = [];
        $(tableId).find("th").each(function(){
            thWidthsArr.push($(this).css("width"));
        });
        var pos = $(tableId).offset();
        var thTop = pos.top + "px";
        var thLeft = pos.left;

        var firstRow = "tr:first-child";

        var hasTHead = $(tableId).find("thead").length;
        if(hasTHead) firstRow = "thead tr:first-child";

        var count = 0;
        $(tableId).find(firstRow + ">th").each(function(){
            $(this).css("width", thWidthsArr[count]);
            count++;
        });
        count = 0;

        var lastRow = "tr:last-child";
        $(tableId).find(lastRow + ">td").each(function(){
            $(this).css("width", thWidthsArr[count]);
            count++;
        });


        $(window).scroll(function(){
            if($(window).scrollTop() > pos.top && $(window).scrollTop() < pos.top + tableHeight - thHeight)
            {
                $(tableId).find(firstRow).css("width", tableWidth+"px");
                $(tableId).find(lastRow).css("width", tableWidth+"px");
                $(tableId).find(firstRow).css("position", "absolute");
                $(tableId).find(firstRow).css("top", ($("body")[0].scrollTop - 2) + "px");
                $(tableId).find(firstRow).css("left", thLeft+ "px");
            }
            else
            {
                $(tableId).find(firstRow).css("position", "relative");
                $(tableId).find(firstRow).css("top", thTop);
            }
        });

    }
})(jQuery);

这行得通，但我已经使用 CSS 更新了 table 的外观并添加了 border-collapse : collapse

这导致 header 大小在浮动时发生变化。

任何人都知道如何让尺寸在浮动时保持原始尺寸 header？

我创建了一个 fiddle here.. 但由于某些原因它不是运行.

Answer 1

经过我的修改： http://jsfiddle.net/8ntdmpe7/1/

仅设置单元格（td 和 th）的宽度，而不是 tr。以及所有单元格，不仅是第一行和最后一行。

使用 outerWidth 而不是 width。

更改框大小如下：

table, table * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Jquery 浮动 Table Header - 边框折叠影响浮动 header 大小

Jquery Floating Table Header - Border Collapse affect floating header size

jquery

floating