Freeze header row and column in scrollable div

I'm trying to freeze both the row and column header of a table which is inside of a fixed-size div scrollable div (overflow: auto). You can see an example of the table/div setup here

I've seen some libraries that are meant to do this, but none have been working as I'd expect. I am able to work with fixed-size elements, so if there is a solution with that, that'd be okay.

So far, I've tried:

On the header row:

• Use position: fixed for thead and then explicitly specify the width of the columns. This feels like it wants to work, but since the div is scrollable horizontally, when you scroll horizontal the headers stay put... I think if the div didn't scroll horizontally, this would work: example
• Tried most of the answers/plugins from this question: Freeze the top row for an html table only (Fixed Table Header Scrolling)

On the header column:

• Use position: absolute with left: 0, this does the same thing as the first point for header row -- seems like it wants to work but since the div is scrollable vertically the row headers stay put as you scroll.
• Tried the highest upvoted answer here (similar to whats mentioned in point 1): how do I create an HTML table with fixed/frozen left column and scrollable body?

So, to restate the question, in my jsFiddle, I'm expecting the numbers to stay visible the entire time, and the blocks to scroll. So, if you're at the very bottom right of the div, the visible header above it should be 12 and the visible header to the left of it should be 17.