CSS Сетка: липкие углы

Question

У меня есть сетка, и я хочу, чтобы самый левый столбец оставался в поле зрения, а верхний ряд оставался в поле зрения. Мими c поведение замораживания их в Excel.

Я могу заставить их работать самостоятельно, но когда я объединяю их, верхний левый угол ведет себя странно. Есть ли простое решение для этого, или мне придется использовать js для измерения размеров, а затем создать абсолютную версию этого сверху?

Я был бы рад, если бы он просто вел себя как верхний ряд или самый левый столбец, но независимо от того, какой класс я даю в верхнем левом столбце, он не будет работать правильно.

https://jsfiddle.net/eL4ux1gd/4/

<style>
.rtable-container {
  width: 500px;
  overflow: auto;
  height: 500px;
  border-top: 1px solid grey;
  border-left: 1px solid grey;
}

.rtable {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  width: 750px;
  height: 750px;
}


.rtable-columnheader {
  box-sizing: border-box;
  padding: 2px;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  background: white;
  position: sticky;
  top: 0;
  width: 100%;
}

.rtable-rowheader {
  box-sizing: border-box;
  padding: 2px;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  background: white;
  position: sticky;
  left: 0;
  width: 100%;
}

.rtable-cornerheader {
  box-sizing: border-box;
  padding: 2px;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  background: white;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

.rtable-cell {
  box-sizing: border-box;
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  padding: 3px;
  width: 100%;
}
</style>

<div class='rtable-container'>
  <div class='rtable'>
    <div class='rtable-cornerheader'>
      Corner
    </div>
    <div class='rtable-columnheader'>
      Column Header
    </div>
    <div class='rtable-columnheader'>
      Column Header
    </div>
    <div class='rtable-rowheader'>
      Row Header
    </div>
    <div class='rtable-cell'>
      A Cell 1
    </div>
    <div class='rtable-cell'>
      A Cell 2
    </div>
    <div class='rtable-rowheader'>
      Row Header
    </div>
    <div class='rtable-cell'>
      A Cell 3
    </div>
    <div class='rtable-cell'>
      A Cell 4
    </div>
  </div>
</div>