如何在css中创建固定的垂直和水平表？

Question

我正在尝试在表格的顶部和最左侧创建一个带有固定变量的2D表格。我已经添加了水平和垂直标题，但我不太清楚如何修复它们以便查看者可以滚动数据。

CSS + HTML：

.fixed-tables {
  position: relative background: white;
}

.fixed-tables th {
  position: absolute;
  background: white;
}

<table class="table fixed-tables">
  <thead>
    <tr>
      <th></th>
      <th>Hor. Header 1</th>
      <th>Hor. Header 2</th>
      <th>Hor. Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Ver. Header 1</th>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
    <tr>
      <th>Ver. Header 2</th>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
    <tr>
      <th>Ver. Header 3</th>
      <td>(null)</td>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
  </tbody>
</table>

这不太有效，因为数据和标题彼此重叠。任何意见是极大的赞赏。

Answer 1

每当我尝试创建具有固定标题或列的表时，我都会使用数据表。它非常强大，可以满足您的需求。

https://datatables.net/