javascript - 带有固定 y 轴标题的 HTML Table overflow-y 滚动

Question

我有一个包含 x 轴和 y 轴标题的表格，我希望表格在 y 轴溢出时滚动，同时保留标题。

使用 display: block; overflow-y: auto;在<table>元素给了我一些滚动，但我失去了 y 轴标签。

这是一个简单的正在开发中的笔:https://codepen.io/Malgalin/pen/wNZRPz?editors=0100

我也尝试过制作 th[scope='row'] 的版本元素有一个固定的位置，这有点管用，但它会产生困惑的重叠标题，并使初始的空白左上角单元格消失。

如果有必要，我很高兴看到使用 JS 或 jQuery 的答案。

Answer 1

您可以为标题使用 sticky 位置。您需要稍微更改您的 HTML，您需要表格的包装器。

<div id='table_wrapper'>
  <table> .... </table>
</div>

现在您可以将 TH 元素设置为 position: sticky，对于 thead，使其固定在 top: 0px，对于 tbody 使用 left : 0px.

仅使用它对您的实际代码不起作用，因为您有一些错误。因此，首先关闭 thead 标签并正确打开一个 tbody 标签(现在您打开 thead 并关闭一个 tbody)。您需要修复的第二件事是删除表格元素上的那些 display: block，这样做会破坏表格。

检查这个编辑过的 codepen 链接 https://codepen.io/anon/pen/daLrGZ?editors=1100

请注意，您需要为 th 添加一些背景。

编辑:如果您希望左上角的 TH 保留在其余的 TH 之上，请添加:

table thead tr th:first-child {
  left: 0px; //so it also sticks to the left
  z-index: 2; //so it's over the rest
}