样式浮动表标题

Question

因此，我一直在尝试完成浮动表头的工作。 不幸的是，我无法使用floatThead jQuery库之类的东西，因为当您在表中滚动时，我需要悬停不同的行，因此我想出了自己的解决方案，基于其他各种答案。

但是，问题在于浮动标头的样式与非浮动标头的样式不匹配，我不确定为什么这样做或解决此问题的正确方法。

这是一个说明我当前代码的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;
}

Answer 1

您的麻烦是display: inline-block了浮动行中的单元格display: inline-block ，这意味着元素之间的空白会影响渲染的输出。

有关此答案的更多信息 （tldr：标准解决方法选项：删除标记中的空格（简单），不提供结束标记（明显是不好的做法，可能有风险）或为父级设置字体大小元素0 ，然后为单元格指定正确的字体大小）

不过，就您而言，您可以使它们display: table-cell （就像非浮动行的单元格一样）。