CSS - Sticky - The non sticky items run over the sticky items when scrolling even after using appropriate z-index

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

Related Post