具有固定标题和固定列的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.

推荐答案

链接：

http://jsbin.com/ nolanole / 1 / edit？html，js，output

FYI：在IE 6,7， 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屋！