I have a table with sticky header (vertical) and first four columns to be sticky (horizontal). I am able to implement both using tailwind (sticky, left-, top-0 and z-), except for one issue: the vertical scrolling, non-sticky rows scroll over the sticky header, even after using z-30 for header and z-10 for non-sticky rows.
The horizontal scroll is working fine. only issue with vertical scroll.
I have trouble replicating the issue, but managed to come up with something below,
<script>
let columns = 10;
let rows = 6;
</script>
<div class="overflow-x-auto overflow-y-auto max-h-[400px]">
<table class="table-auto border-collapse bg-white w-full">
<thead class="sticky top-0 bg-background">
<tr class="flex">
<th class="sticky left-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 1</th>
<th class="sticky left-14 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 2</th>
<th class="sticky left-28 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 3</th>
<th class="sticky left-40 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 4</th>
{#each {length: columns} as _, i}
<th class="border border-gray-400 p-1 z-20">Non Sticky Header {i+1}</th>
{/each}
</tr>
</thead>
<tbody>
{#each {length: rows} as _, j}
<tr class="flex">
<td class="sticky left-0 z-20 bg-gray-300 w-30 border border-gray-400 p-1">Sticky Record 1</td>
<td class="sticky left-14 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 2</td>
<td class="sticky left-28 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 3</td>
<td class="sticky left-40 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 4</td>
{#each {length: columns} as _, i}
<td class="border border-gray-400 p-1 z-10">Non Sticky Record {i+1}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
Expectation: non sticking rows to scroll under the sticky header
It was a small problem. All that was required was to move the z index from th to thead. once moved the non sticky rows started gliding under the sticky header.
<script>
let columns = 10;
let rows = 6;
</script>
<div class="overflow-x-auto overflow-y-auto max-h-[400px]">
<table class="table-auto border-collapse bg-white w-full">
<thead class="sticky top-0 z-20 bg-background">
<tr class="flex">
<th class="sticky left-0 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 1</th>
<th class="sticky left-14 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 2</th>
<th class="sticky left-28 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 3</th>
<th class="sticky left-40 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 4</th>
{#each {length: columns} as _, i}
<th class="border border-gray-400 p-1 z-20">Non Sticky Header {i+1}</th>
{/each}
</tr>
</thead>
<tbody>
{#each {length: rows} as _, j}
<tr class="flex">
<td class="sticky left-0 z-20 bg-gray-300 w-30 border border-gray-400 p-1">Sticky Record 1</td>
<td class="sticky left-14 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 2</td>
<td class="sticky left-28 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 3</td>
<td class="sticky left-40 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 4</td>
{#each {length: columns} as _, i}
<td class="border border-gray-400 p-1 z-10">Non Sticky Record {i+1}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
</svelte:head>