javascript - 仅在 Y 中具有固定标题的 HTML 表格(在 X 中可滚动)

Question

我正在尝试制作一个在 Y 轴上仅具有固定标题的表格(就像在 Excel 中一样)。问题是它需要在 X 轴上滚动。我找到了 another answer here但它对我不起作用。这是我的测试 JSBIN

我试过

style="width: 400px; height: 200px; overflow: scroll;"

做一个测试用例。并与

position: absolute;

和

position: static;

使 header 静态化。还尝试了另一个问题的答案，但对我来说没有积极的结果。

这不是另一个问题的重复，因为问题略有不同。

我可以使用CSS、Javascript 或任何 来解决这个问题。

Answer 1

将thead的位置设置为绝对位置，并固定其中的tr:https://jsfiddle.net/yak613/x5stpv9y/

table {
  position: relative;
  padding-top: 20px;
}
table thead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
}
table thead tr {
  position: fixed;
  background: #fff;

}