HTML 表格溢出 y 滚动并固定 y 轴标题

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

Using display: block; overflow-y: auto; in the <table>element 给了我一些滚动，但我丢失了 y 轴标签。

这是一个正在进行的简单笔工作：https://codepen.io/Malgalin/pen/wNZRPz?editors=0100 https://codepen.io/Malgalin/pen/wNZRPz?editors=0100

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

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

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

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

现在您可以将 TH 元素设置为position: sticky并且，对于头部，使其粘在top: 0px，供身体使用left: 0px.

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

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

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

编辑：如果您希望左上角的 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
}