Javascript HTML表格溢出-带固定y轴标题的y轴滚动

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

使用

显示：块；溢出y：自动

元素中的code>使我进行了一些滚动，但我丢失了y轴标签

下面是一个正在进行的简单笔画：

我也尝试过使

th[scope='row']

元素有一个固定位置的版本，这是可行的，但它会创建凌乱的重叠标题，并使最初的空白左上角单元格消失

---

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

也许您正在寻找的问题已经解决了，请看一看并让我知道：

在上面的链接中，您可以使用CSS网格找到一个带有固定标题的可滚动表

基本上，在网格中为

thead

和

tbody

定义两个区域，并为第二个区域设置溢出

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: 400px; /* define height depending on your needs */
}

---

希望得到以下帮助：）

您可以使用

粘贴位置作为标题。你需要稍微修改一下你的HTML，你需要一个表的包装器

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

啊，为那些草率的thead和tbody标签道歉…我的工作编辑的一些新手拷贝粘贴。现在我来看看你的建议。看起来大部分都是这样，但是在将th元素设置为不透明背景后，左上角的空白单元格仍然是透明的。我在那里尝试了一个
来欺骗它，使其将其视为有内容，但仍然没有成功。有什么想法吗？奇怪，我可以为所有的TH设置背景，左上角的单元格不是空的是的，我知道它在做什么。它正在改变颜色，但是它将空白单元格视为可移动的而不是固定的，所以当你滚动用户名在标题列上可见时，它并不是一个交易的破坏者。我想我现在可以处理这个问题。谢谢。哦，太好了！谢谢遗憾的是，我不能接受这个答案两次：）嗯，我尝试了一下，有一些变化，没有运气。不过，我稍后可能会尝试实现这个版本。我喜欢基于网格的方法。ThanksIt更简单，是声明性的，您不必使用包装器（避免使用dividitis）。在上面的链接中有一个工作示例。如果你有什么困难，请告诉我：）
table thead tr th:first-child {
  left: 0px; //so it also sticks to the left
  z-index: 2; //so it's over the rest
}