标签: table scroll

在实际开发中，我们经常需要处理大量数据的表格，而且通常需要固定表头，只让表格内容部分滚动。以下是一个实现这种效果的 HTML 和 CSS 示例：

<table class="w-full">
  <thead>
    <tr>
      <th class="w-24 min-w-24">Name</th>
      <th class="w-auto">Age</th>
      <th class="w-auto">Gender</th>
    </tr>
  </thead>
  <tbody class="w-full block lg:h-[50dvh] overflow-y-auto h-[300px]">
    <tr class="w-full table">
      <td class="w-24 min-w-24">John Doe</td>
      <td class="w-auto">30</td>
      <td class="w-auto">Male</td>
    </tr>
  </tbody>
</table>

Tang Yuan2024/9/19大约 1 分钟