🎨 Fixed header in contest table (#1874)

Author: KATO-Hiro

src/lib/components/TaskTables/TaskTable.svelte

@@ -129,14 +129,12 @@
 </Heading>
 
 <!-- TODO: ページネーションを実装 -->
-<!-- TODO: ヘッダーを固定できるようにする。-->
-<!-- HACK: Flowbite と tailwindcss の相性が悪いのかもしれない。tailwindcss のクラス指定、raw HTML & CSS を試したが、いずれも実現できず。 -->
 <!-- See: -->
 <!-- https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx -->
 <!-- https://github.com/birdou/atcoder-blogs/blob/main/app/atcoder-blogs-frontend/src/pages/BlogTablePage/BlogTablePage.tsx -->
 <!-- https://tailwindcss.com/docs/position#sticky-positioning-elements -->
-<div class="container w-full overflow-hidden rounded-md border shadow-sm">
-  <div class="w-full overflow-auto">
+<div class="container w-full rounded-md border shadow-sm">
+  <div class="w-full sticky top-0 z-20 border-b">
     <Table id="task-table" class="text-md table-fixed w-full" aria-label="Task table">
       <TableHead class="text-sm bg-gray-100">
         <TableHeadCell class="w-full xl:w-16 px-2 text-center" scope="col">Round</TableHeadCell>
@@ -149,7 +147,11 @@
           {/each}
         {/if}
       </TableHead>
+    </Table>
+  </div>
 
+  <div class="w-full overflow-auto max-h-[calc(80vh-56px)]">
+    <Table id="task-table" class="text-md table-fixed w-full" aria-label="Task table">
       <TableBody class="divide-y">
         {#if contestIds.length && taskTableHeaderIds.length}
           {#each contestIds as contestId}