固定 HTML 表格中的特定行或列答案

【问题标题】：Keeping a certain row or column in an HTML table fixed固定 HTML 表格中的特定行或列
【发布时间】：2010-04-21 06:03:22
【问题描述】：

我有大量数据填充 HTML <table>，它有 200 多行和 200 多列。

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

我如何在表格中滚动时仍然保持顶行和最左边一列固定，以便我始终知道我看到的是什么数据。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果存在简单的解决方案，请使用它们。 :)
您可以使用 tbody 并为其指定固定高度或最大高度并溢出：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>

【讨论】：