带有固定标题和固定列的 HTML 表格? [英] HTML table with fixed headers and a fixed column?

问题描述

是否有一种 CSS/JavaScript 技术来显示一个长 HTML 表格，以便列标题在屏幕上保持固定，第一列保持固定并随数据滚动.

Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.

我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列.

I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.

如果有 jQuery 插件就好了！如果它对我唯一关心的浏览器有帮助，那就是 Firefox.

If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.

推荐答案

pranav 发布的链接:

http://jsbin.com/nolanole/1/edit?html,js,输出

仅供参考:在 IE 6、7 和 IE 中测试过8(兼容模式开或关)，FF 3 &3.5、Chrome 2. 对屏幕阅读器不友好(标题不是内容表的一部分).

FYI: Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2. Not screen-reader-friendly (headers aren't part of content table).

编辑 5/5/14:将示例移至 jsBin.这是旧的，但令人惊讶的是在当前的 Chrome、IE 和 Firefox 中仍然有效(尽管 IE 和 Firefox 可能需要对行高进行一些调整).

EDIT 5/5/14: moved example to jsBin. This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).

这篇关于带有固定标题和固定列的 HTML 表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！