csstailwind-csssticky

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="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


Solution

  • 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>