Can't freeze two first columns with CSS from scrolling

Question

I make to prevent first two columns from scrolling. https://jsfiddle.net/kzqbaLu2/1/

I tried to adopt examples from here how do I create an HTML table with fixed/frozen left column and scrollable body?

But after adding (commented in my example):

.headcol {
  position: absolute;
  width: 15em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  margin-top: -1px;
}

.headcol:before {
  content: 'Row ';
}

My table begin to look ugly:

I need to prevent from scrolling first two column.