带有固定标题的水平和垂直滚动表

Question

我确实有一个带有固定标题的水平和垂直滚动表，其中的元素占用了它需要的空间。我正在使用 React。如果仅靠 CSS 无法解决它，如果还有基于反应的解决方案，那就太棒了。

注意：

• 我确实尝试了其他解决方案here，但这不是我想要的
• 如果 td 也可以设置 min-width 就更好了
• 点击标题进行排序和过滤时显示菜单

Answer 1

有一个简单的 CSS 解决方案可以修复表格中的行（标题）和列。

th {
  position: sticky:
  top: 0;
}

上面的 sn-p 将把 header 固定到顶部。然后只需在表的父容器中添加一个简单的溢出即可。您可以在下面找到一个简单的示例 -

.table-container {
  overflow: auto;
  max-height: 160px;
  border: 1px solid red;
}

th {
  position: sticky;
  top: 0;
  background: white;
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>