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

Question

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

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

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

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

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

Answer 1

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

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

现在您可以将 TH 元素设置为 position: Sticky，对于标题，使其粘在 top: 0px，对于 tbody 使用 left :0px。

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

检查这个编辑过的codepen链接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
}