javascript - 带有固定标题的 HTML 表格？

Question

是否有跨浏览器的 CSS/JavaScript 技术来显示长 HTML 表格，以便列标题在屏幕上保持固定并且不随表格主体滚动。想一想 Microsoft Excel 中的“卡住 Pane ”效果。

我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。

Answer 1

这可以用四行代码干净地解决。

如果您只关心现代浏览器，使用 CSS 转换可以更轻松地实现固定 header 。听起来很奇怪，但效果很好:

• HTML 和 CSS 保持原样。
• 没有外部 JavaScript 依赖项。
• 四行代码。
• 适用于所有配置(表格布局:固定等)。

document.getElementById("wrap").addEventListener("scroll", function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

对 CSS 转换的支持是 widely available除了 Internet Explorer 8-。

完整示例供引用:

document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

/* Your existing container */
#wrap {
    overflow: auto;
    height: 400px;
}

/* CSS for demo */
td {
    background-color: green;
    width: 200px;
    height: 100px;
}

<div id="wrap">
    <table>
        <thead>
            <tr>
                <th>Foo</th>
                <th>Bar</th>
            </tr>
        </thead>
        <tbody>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>
</div>