Таблица Flexbox с фиксированным столбцом и заголовком

Question

Информация

Здравствуйте, у меня есть таблица flexbox, которую я упростил до фрагмента кода ниже.У меня есть данные таблицы в этом формате

tableData = [
  {
    category: "category name",
    rows: [
      {
        rowName: "row name",
        columns: [
          { columnName: "column name" }
        ]
      }
    ]
  }
]

, и таблица работает до сих пор.Но с большим количеством данных таблица бесполезна, потому что я не вижу первый столбец, который содержит важную информацию для других столбцов.Другая важная вещь состоит в том, что <div class="table-section"> должен служить «окном» для просмотра таблицы, потому что я не хочу прокручивать всю страницу.

Вопрос

Как я могу зафиксировать первый столбец в позиции и прокрутить остальную часть таблицы по горизонтали и вертикали?Должен ли я использовать базовую таблицу HTML или другой подход?Спасибо

.content {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
}
.container {
    padding: 20px 35px;
    display: flex;
    flex-flow: column;
    height: 100vh;
    overflow: hidden;
}
.info-section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: none;
}
.table-section {
    border: solid 1px #CCCCCC;
    overflow: scroll;
}
.table-container {
    width: max-content !important;
    padding: 5px;
}
.table-category {
    margin: 15px;
    margin: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.table-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.table-column {
    width: 200px;
    padding: 5px;
    font-size: 11px;
    border-right: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    font-weight: 500;
}

<div class="content">
  <div class="container">
    <div class="info-section">
      <h1>Info etc.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor auctor tempor. Sed blandit et tortor varius porta. Sed sed pharetra ex. Nam ultrices elit velit, ac ultricies quam malesuada non. Nunc suscipit nibh dictum felis dignissim, quis ultrices lacus vulputate. In ligula ante, bibendum accumsan aliquam sagittis, iaculis id lorem. Suspendisse volutpat mollis tempor. Duis et nisl sit amet erat viverra ornare sit amet porta mauris.</p>
    </div>
    <div class="table-section">
      <div class="table-container">
        <div class="table-category">
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              Fixed Heading
            </div>
            <div class="table-column">
              Fixed Heading
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
        </div>
        <div class="table-category">
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
          <div class="table-row">
            <div class="table-column">
              fixed column
            </div>
            <div class="table-column">
              data 1
            </div>
            <div class="table-column">
              data 2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>