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

<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包围表格。
目前，上面的例子中，表格的行为与预期的一样，但是高度和宽度是硬编码的，与表格的高度和宽度不匹配，它们应该填充可用的空间。如果我删除带有硬编码的宽度和高度的inline-block，表格看起来就像它应该的那样，但是它不能滚动。
任何建议或想法是什么导致这一点？谢谢