给定一个固定标题的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
        });
    }
}

最佳答案

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

更新了小提琴here

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

10-08 19:05