保持HTML表中的某个行或列是固定的

Question

我有大量数据填充了包含200多行和200列的HTML <table>。

但是，当我水平或垂直滚动​​页面以查看数据时，标题列（例如，如此）超出了页面。

如何滚动表格并仍然保持顶行和最左列固定，以便我始终知道我看到的数据。

Answer 1

这是一个很好的解决方案：http://www.imaputz.com/cssStuff/bigFourVersion.html

虽然实现JavaScript / jQuery解决方案会打开更多门。

有关详细信息，请参阅此SO帖子：HTML table with fixed headers?

Answer 2

您可以使用jQuery，或者您可以尝试混合以下解决方案：

标题：http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html

标题和第一列，但仍处于测试阶段：  http://fixedheadertable.mmalek.com

只修复了第一列： http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm

Answer 3

使用简单的解决方案。 :)
你可以使用tbody并给它固定高度或最大高度和overflow：auto;：

CSS：

tbody {
  max-height: 500px;
  max-width: 100%;
  overflow: auto;
}

和HTML一样：

<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>