Fixed table header scroll both horizontal and vertical CSS ONLY
<p>Firstly, is it possible to achieve this using only CSS? </p>

<p>I have built a table that can scroll both horizontally and vertically however, I want to have the header encapsulated within it's container and not appear outside of the wrapper. So that when you scroll horizontally the corresponding header is in line with the content of it's designated column.</p>

<p>Using different variations of <code>position: absolute</code> and <code>position: static</code> give me some intended results but not the complete solution. </p>

<p>You'll note the width applied to the <code>section</code> element to give the effect of scrolling horizontally within the enclosed region. </p>

<p>Here is a JSFIDDLE example of what I have so far and CSS below to reference</p>

<p><a href="https://jsfiddle.net/ko6qco1r/" rel="nofollow">https://jsfiddle.net/ko6qco1r/</a></p>

<pre><code>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;
}
</code></pre>