具有固定标题和可滚动正文的 Tailwindcss 表格

Question

我正在尝试使用 Tailwind 构建一个具有固定标题和可滚动正文的表格。请注意，只有表格的主体应该是可滚动的，而不是周围的 div。这是为了防止滚动条覆盖标题。

这是我的桌子：

 <div
  class="h-full border-separate overflow-clip rounded-xl border border-solid"
>
  <table class="w-full table-fixed flex-col">
    <thead class="sticky top-0">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody class="inline-block h-96 w-96 overflow-y-scroll">
      <For each={props.users.items}>
        {(user) => (
          <tr
            class="cursor-pointer space-x-2"
          >
            <td>
              {user.firstName} {user.lastName}
            </td>
            <td>{user.email}</td>
            <td>{user.country}</td>
          </tr>
        )}
      </For>
    </tbody>
  </table>
</div>

在父组件中，我有一个 div 围绕着表格，并带有 flex-1。

目前，在上面的示例中，表格的行为符合预期，但高度和宽度是硬编码的，并且与表格的高度和宽度不匹配，它们应该填充可用空间。如果我删除具有硬编码宽度和高度的内联块，则表格看起来完全符合其应有的样子，但不可滚动。

对于造成这种情况的原因有什么建议或想法吗？谢谢

Answer 1

在填充可用空间时仅使

tbody

可滚动的一种方法是使用

flex

和

overflow-y-auto

的组合。

<div class="h-full border-separate overflow-clip rounded-xl border border-solid flex flex-col">
  <table class="w-full table-fixed">
    <thead class="sticky top-0">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
      </tr>
    </thead>
  </table>
  <div class="flex-1 overflow-y-auto">
    <table class="w-full table-fixed">
      <tbody>
        <For each={props.users.items}>
          {(user) => (
            <tr class="cursor-pointer space-x-2">
              <td>
                {user.firstName} {user.lastName}
              </td>
              <td>{user.email}</td>
              <td>{user.country}</td>
            </tr>
          )}
        </For>
      </tbody>
    </table>
  </div>
</div>

顺风游乐场