Таблица с фиксированным заголовком и фиксированным первым столбцом, совместимая с IE11 и без использования jQuery

Question

Меня попросили создать динамическую c таблицу с возможностью прокрутки с фиксированным заголовком и фиксированным первым столбцом. Из-за соображений совместимости я не могу использовать position: sticky или jQuery, но разрешен vanilla Javascript (это проект Vue, и мы должны поддерживать IE11). То, что я попробовал, - это поиграть с DIV и полосами прокрутки, создав отдельную таблицу для заголовков, другую для фиксированного столбца и другую для данных.

<!-- Wrapper -->
<div class="pt-wrapper">
  <!-- Keep headers -->
  <div class="pt-keep-headers">
    <!-- Headers (fixed) -->
    <table>
      <tbody>
        <tr>
          <td>Header 1</td>
          <td>Header 2</td>
        </tr>
      </tbody>
    </table>

    <!-- Chapters (fixed) -->
    <div class="pt-chapters">
      <table>
        <tr>
          <td>Chapter 1</td>
        </tr>
        <tr>
          <td>Chapter 2</td>
        </tr>
        <tr>
          <td>Chapter 3</td>
        </tr>
      </table>

      <div class="pt-table-scroll">
        <table>
          <tr>
            <td>Value 10</td>
            <td>Value 11</td>
          </tr>
          <tr>
            <td>Value 20</td>
            <td>Value 21</td>
          </tr>
          <tr>
            <td>Value 30</td>
            <td>Value 31</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

.pt-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.pt-wrapper .pt-keep-headers {
  overflow-x: scroll;
  height: 550px;
}

.pt-wrapper .pt-chapters {
  display: flex;
  flex-wrap: nowrap;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 500px;
}

Но я понял, что это делается таким образом, я всегда заканчиваю тем, что теряю заголовок или фиксированный столбец, когда выполняю прокрутку, в зависимости от расположения DIV.

Есть ли лучший способ достижения как фиксированного заголовка, так и фиксированного столбца?

Заранее спасибо.