Html 固定表格标题仅滚动水平和垂直CSS

首先，是否可以仅使用CSS来实现这一点

我已经构建了一个可以水平和垂直滚动的表，但是，我希望将标题封装在它的容器中，而不是出现在包装器之外。这样，当您水平滚动时，相应的标题与指定列的内容一致

使用不同的

position:absolute

和

position:static

变量可以得到一些预期的结果，但不是完整的解决方案

您将注意到应用于

部分的宽度

元素，以提供在封闭区域内水平滚动的效果

这里是一个JSFIDLE示例，介绍了到目前为止我所拥有的内容和下面要参考的CSS

---

这是W3C的不作为给我们带来的另一个有趣的挑战（如垂直居中）。同样与垂直居中一样，您不能使用

position:fixed将固定标题放在带有水平滚动条的表格上在
thead
元素上。但你有两个选择

选项1-水平滚动（）

这里的关键是将您的表格布局重新设置为
表格布局：固定
然后在希望滚动条出现时，在容器上放置一个
最小宽度
值。这使得表格可以从左向右滚动，并在较小的设备上保持列标题的完整性。但是标题不是固定的

选项2-固定标题（）

你的代码看起来像是从这家伙的作品中剽窃的，所以我想我应该在这里转载给他一些信用。这种方法创建了一系列反映
元素内容的
元素，并使用了一些非常有创意的定位技术来实现这一切

有一个更好的详细说明，其中显示了一些，并详细解释了所有复杂的操作，以确保正确操作。
标题保持不变，有什么问题？编辑-我希望标题封装在it容器中，而不是出现在包装器外。因此，当你水平滚动时，相应的标题与指定列的内容是一致的。为此我表示感谢，遗憾的是，这是我已经到达的位置-由企业决定他们想要做什么。至于破解那些家伙的代码，是的，我是为了一个例子而做的——我的实际代码与他的实现不同，因为我的表有一个固定的左列，它的实现方式不同，所以感谢你注意到了这一点。不用担心——我想这就是你学习的方式，至少我是这样做的。糟糕的业务需求是我们所有人都必须面对的——继续努力。
html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: grey;
  width: 300px;
}

.container {
  overflow-y: auto;
  overflow-x: scroll;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: white;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid black;
}
th:first-child div{
  border: none;
}