设置TH的最小和最大宽度非常慢

Question

给定一个固定标题的HTML表，我试图将标题列与正文行列对齐。 我这样做是因为我用来固定标头的CSS导致标头与主体的其余部分不对齐。

我正在使用的javascript可以运行，但是速度非常慢。 关于如何加快速度的任何想法？

这是显示问题的小提琴。 目前，相对较小的桌子大约需要5秒钟以上的时间。 http://jsfiddle.net/w93NU/

这是我正在使用的代码：

function fixedHeader($table) {
    //This function compares the header row with the first body row and lines up all of the widths
    var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
    var headerRowThs = $table.find("th");

    for (var i = 0; i < firstRowTds.length; i++) {
        var head = headerRowThs[i];
        var cell = firstRowTds[i];
        var width = (Math.max($(cell).outerWidth(), $(head).outerWidth())) + "px";
        //Here are my problem pieces.  Setting these values are what kills the perfomanrce
        $(cell).css({
            "min-width": width,
            "max-width": width
        });
        $(head).css({
            "min-width": width,
            "max-width": width
        });
    }
}

Answer 1

好吧，经过反复的尝试，如果您注释掉样式表中的最后一项，那么它很快。 我不知道为什么

在这里更新小提琴

/* fixed width for THs */
/* the tbody needs to be 16px less than the thead, for the scrollbar */
/*#readiness-grid tbody td {
    width: 242px;
}*/

Answer 2

// changing:
var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
var headerRowThs = $table.find("th");
// to:
var firstRowTds = $table.children("tbody:first > tr:first > td");
var headerRowThs = $table.find("thead > th");

限制节点查找的范围，并将示例表的开始/结束时间之间的时间从〜800ms减少到〜2ms。