How to make a table with a fixed header and scrollable body?

[pidanou]

Hi, I just can't manage to create a table with a fixed header and scrollable body. Either everything is fixed or the header also moves.
What I did is: overflow-hidden the table, and overflow-auto the body. Am I missing something?
Here is my code:

<div class="flex flex-col gap-y-2 overflow-hidden">
  <Button class="w-min">Generate</Button>
  <Table.Root class="overflow-hidden">
    <Table.Header>
      <Table.Row>
        <Table.Head
          ><Checkbox
            onCheckedChange={(v) => {
              if (v) {
                addAll();
              } else {
                removeAll();
              }
            }}
          /></Table.Head
        >
        <Table.Head>id</Table.Head>
        <Table.Head>Libelle</Table.Head>
      </Table.Row>
    </Table.Header>
    <Table.Body class="overflow-y-auto">
      {#each zones as zone}
        {@const checked = selected.includes(zone.id)}
        <Table.Row>
          <Table.Cell
            ><Checkbox
              {checked}
              onCheckedChange={(v) => {
                if (v) {
                  addItem(zone.id);
                } else {
                  removeItem(zone.id);
                }
              }}
            /></Table.Cell
          >
          <Table.Cell class="font-medium">{zone.id}</Table.Cell>
          <Table.Cell>{zone.libelle}</Table.Cell>
        </Table.Row>
      {/each}
    </Table.Body>
  </Table.Root>
</div>