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="bg-background">
<tr class="flex">
<th class="sticky left-0 top-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 1</th>
<th class="sticky left-14 top-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 2</th>
<th class="sticky left-28 top-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 3</th>
<th class="sticky left-40 top-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 4</th>
{#each {length: columns} as _, i}
<th class="sticky top-0 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
You need to sign in to view this answers
Leave feedback about this