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

Question

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

我正在使用的 javascript 有效，但速度极慢。关于如何加快速度的任何想法？

这是显示问题的 fiddle 。现在，一张相对较小的 table 需要大约 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

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

更新 fiddle here

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