I am trying to put together a table that has sticky column headers and “section headers” (in red) in the data. I have something sort of working but there is some visual oddness.

The section title at the top of the table body is not perfectly lined up with the table column headers. You can see when you scroll that it pops behind the column headers by a few pixels.

How can I align the section titles with the bottom of the column headers?

Currently, I am just using “top-11” to get the alignment close to right as when I do “top-0”, the section headers end up behind the column headers. “top-12” allows for a tiny gap where you can slightly see text scrolling between the column headers and the section headers.

Here is what I have so far:

https://play.tailwindcss.com/SoJa4vCLCw

<div class="flex w-screen p-3">
  <div class="box-border flex max-h-[90vh] flex-col rounded-lg bg-white shadow">
    <div class="sticky top-0 z-10 rounded-lg border-b bg-white px-4 py-4">Sticky Table</div>
    <div class="max-h-32 w-screen overflow-y-scroll pb-5">
      <table class="min-w-full divide-y divide-gray-300">
        <thead>
          <tr>
            <th scope="col" class="sticky top-0 z-20 border-b border-gray-300 bg-white py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Col 1</th>
            <th scope="col" class="sticky top-0 z-20 border-b border-gray-300 bg-white py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Col 2</th>
            <th scope="col" class="sticky top-0 z-20 border-b border-gray-300 bg-white py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Col 3</th>
          </tr>
        </thead>
        <div>
          <tbody>
            <tr>
              <td colspan="3" class="sticky top-11 z-10 bg-red-400">Section Title</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>

            <tr>
              <td colspan="3" class="sticky top-11 z-10 bg-red-400">Section Title 2</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>

            <tr>
              <td colspan="3" class="sticky top-11 z-10 bg-red-400">Section Title 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
            </tr>
          </tbody>
        </div>
      </table>
    </div>
    <div class="border-t p-1 px-4 py-2">Showing 10 Items</div>
  </div>
</div>