title: HTML Table overflow-y scrolling with fixed y axis headings
body: <p>I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header.</p>
  
  <p>Using <code>display: block; overflow-y: auto;</code> in the <code>&lt;table&gt;</code> element gives me some scrolling, but I lose the y axis labels.</p>
  
  <p>Here's a simple pen work-in-progress: <a href="https://codepen.io/Malgalin/pen/wNZRPz?editors=0100" rel="nofollow noreferrer">https://codepen.io/Malgalin/pen/wNZRPz?editors=0100</a></p>
  
  <p>I have also tried versions of making the <code>th[scope='row']</code> elements have a fixed position, which sort of works, but it creates messy over-lapping headers and makes the initial blank top left corner cell disappear.</p>
  
  <p>I'm happy to see answers using JS or jQuery if necessary.</p>