样式浮动表头(Style floating table headers)

 所以我一直在努力让浮动表头工作。 不幸的是我不能使用像floatThead jQuery库这样的东西，因为我需要在滚动表格时悬停不同的行，所以我基于各种其他SO答案提出了我自己的解决方案。 
 
 但是，问题是浮动标题的样式与非浮动标题的样式不匹配，我不确定为什么是这样或正确的方法来解决这个问题。 
 
 这是一个说明我当前代码的jsFiddle 。 问题是具有不同列的第一个浮动标头与非浮动标头的大小不匹配，即使它们都具有百分比宽度（加起来为100％）。 
 
 重要的javascript： 
 
var persist = $(".persist-area");
var z_index = 900;
var count = 0;
persist.each(function() {
    var el = $(".persist-thead>tr", this);
    el.before(el.clone()).css({"width": el.width(), "top": "0px", "z-index": "899"}).addClass('floating-thead');
    $(".persist-header", this).each(function() {
        var clone = $(this);
        clone.before(clone.clone()).css({
            "width": clone.width(),
            "top": (0 + el.height()) + "px",
            "z-index": "" + z_index
        }).addClass("floating-header").removeClass("persist-header").attr('id', 'floating-header-' + count);
        z_index++;
        count++;
    });
});
 
 和css： 
 
.floating-thead,
.floating-header {
    position: fixed;
    top: 0;
    visibility: hidden;
}

.floating-thead > td,
.floating-header > td {
    display: inline-block;
    text-align: center;
}

So I've been trying to accomplish getting floating table headers to work. Unfortunately I cannot use something like floatThead jQuery library as I need to hover different rows as you scroll through the table so I've come up with my own solution based on various other SO answers.
 
However, the problem is that the styling of the floating header does not match the styling of the non-floated header and I'm not sure why that is or the proper way to fix this.
 
Here's a jsFiddle illustrating my current code. The issue is that the first floating header which has different columns does not match the sizing of the non-floating header even though they both have percentage widths (that add up to 100%).
 
The important javascript:
 
var persist = $(".persist-area");
var z_index = 900;
var count = 0;
persist.each(function() {
    var el = $(".persist-thead>tr", this);
    el.before(el.clone()).css({"width": el.width(), "top": "0px", "z-index": "899"}).addClass('floating-thead');
    $(".persist-header", this).each(function() {
        var clone = $(this);
        clone.before(clone.clone()).css({
            "width": clone.width(),
            "top": (0 + el.height()) + "px",
            "z-index": "" + z_index
        }).addClass("floating-header").removeClass("persist-header").attr('id', 'floating-header-' + count);
        z_index++;
        count++;
    });
});
 
and css:
 
.floating-thead,
.floating-header {
    position: fixed;
    top: 0;
    visibility: hidden;
}

.floating-thead > td,
.floating-header > td {
    display: inline-block;
    text-align: center;
}

原文：https://stackoverflow.com/questions/39665883