Question

我正在使用这个jQuery使表头粘滞。

(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更新了我的表格外观并添加了border-collapse : collapse

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

任何人都有任何想法，当它浮动时我如何能够保持原始标题的大小？

我创造了一个小提琴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浮动表头 - 边界折叠影响浮动头大小

1 个答案: