具有固定列和标题的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>