是否有 CSS/JavaScript 技术来显示长 HTML 表格，以便列标题在屏幕上保持固定，第一列保持固定并随数据滚动。
我希望能够滚动表格的内容，但始终能够看到顶部的列标题和左侧的第一列。
如果有一个jQuery插件就太好了！如果它有帮助，我唯一关心的浏览器是 Firefox。
带有固定标题和固定列的 HTML 表格？
IT技术
javascript
html
css
html-table
2021-02-07 16:44:59
6个回答
http://jsbin.com/nolanole/1/edit?html,js,output
仅供参考：在 IE 6、7 和 8（兼容模式打开或关闭）、FF 3 和 3.5、Chrome 2 中测试。不适合屏幕阅读器（标题不是内容表的一部分）。
编辑 5/5/14：将示例移至 jsBin。这是旧的，但令人惊讶的是在当前的 Chrome、IE 和 Firefox 中仍然有效（尽管 IE 和 Firefox 可能需要对行高进行一些调整）。
的jQuery的数据表插件是实现类似Excel固定柱（一个或多个）和标头一个很好的方法。
请注意站点的示例部分和“附加内容”。
http://datatables.net/examples/
http://datatables.net/extras/
“附加”部分具有用于固定列和固定标题的工具。
固定列
http://datatables.net/extras/fixedcolumns/
（我相信此页面上的示例最适合您的问题。）
固定标题
http://datatables.net/extras/fixedheader/
（包括一个具有整页电子表格样式布局的示例：http : //datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html）
您可能正在寻找这个。
但是它有一些已知的问题。
我看到这个，虽然是一个老问题，但它是插入我自己的脚本的一个很好的地方：
http://code.google.com/p/js-scroll-table-header/
它无需配置即可工作，并且非常易于设置。
如果您想要的是在表格中的数据垂直滚动时保留标题，您应该实现一个 <tbody> 样式为“overflow-y: auto”，如下所示：
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
如果 <tbody> 内容增长到高于所需高度，它将开始滚动。但是，无论滚动位置如何，标题都将固定在顶部。