javascript - 滚动时修复 HTML 表头

Question

我有一个非常长的 HTML 表格，我需要修复标题的滚动问题，我找到了很多插件和技巧来完成它，但没有一个对我有用。

我猜对我不起作用的原因是:

1. 所有的解决方案都将表头从表中分离出来
2. 他们为每一列使用固定宽度以适应标题，使标题位于内容之上
3. 我的表格 react 灵敏，可以拉伸(stretch)以获得可能的全宽 (width=100%)

有人有什么建议吗？

编辑:感谢 ashley 我更新了我的 css 技术

My hmlt table looks exactly like: http://jsfiddle.net/enPZP/4/

Answer 1

我想我想出了一个相当好的解决方案，它比我想要的要深一些，但我对结果非常满意。

它的工作方式是准备好文档，克隆表头，将克隆的大小设置为表头的大小，并将其放在另一个表头的顶部。在滚动时，如果窗口顶部低于表格顶部，我们设置克隆的 top位于窗口的顶部。在调整大小时，我们重新计算 <th>尺寸。

请注意，我放置了 <th>进入 <thead>与 .

jsFiddle

var tableBaseTop;
var originalHeader;
var floatingHeader;

$(document).ready(function () {
    tableBaseTop = $('table th').offset().top;
    originalHeader = $('thead');
    floatingHeader = originalHeader.clone();
    floatingHeader
        .css('position', 'absolute')
        .css('top', 0);

    setFloatingHeaderSize();

    $('table').prepend(floatingHeader);

    $(window).scroll(function () {
        var windowTop = $(window).scrollTop();

        if (windowTop > tableBaseTop)
            floatingHeader.css('top', windowTop - tableBaseTop);
        else
            floatingHeader.css('top', 0);
    });

    $(window).resize(setFloatingHeaderSize);
});

function setFloatingHeaderSize() {
    var originalThs = originalHeader.find('th');
    var floatingThs = floatingHeader.find('th');
    for (var i = 0; i < originalThs.length; i++) {
        floatingThs.eq(i)
            .css('width', originalThs.eq(i).width())
            .css('height', originalThs.eq(i).height());
    }
}

Firefox header 宽度问题

我设法解决了这个问题，但我不知道如何使用 jQuery 的助手来解决这个问题。问题是当实际宽度/高度是小数时，jQuery 给了我整数大小，而我需要它们作为 float 。这是我用工作 fiddle 更改的代码部分。

jsFiddle

function setFloatingHeaderSize() {
    var originalThs = originalHeader.find('th');
    var floatingThs = floatingHeader.find('th');
    for (var i = 0; i < originalThs.length; i++) {
        var padding = 
            parseFloat(window.getComputedStyle(this.originalThs[i], null).getPropertyValue('padding-left').replace('px', ''), 10) +
            parseFloat(window.getComputedStyle(this.originalThs[i], null).getPropertyValue('padding-right').replace('px', ''), 10);

        floatingThs.eq(i)
            .css('width', this.originalThs[i].offsetWidth - padding)
            .css('height', this.originalThs[i].offsetHeight - padding);
    }
}

更新:我在提出解决方案后不久将其制作成一个可重用的库，view on GitHub .