Sticky Table Header in overflow parent container with sticky top navigation bar

user_9588444 0
Viewed 3134

I have a table inside a container and want to have the table header to stick below the top navigation (which is sticky as well) on scroll.

I have a Tailwind Playground here: https://play.tailwindcss.com/OYFqCdJR6f

tailwind-css html-table css html
1 Answers

The reason it's not working is because both elements, the table header and the navigation are set to top: 0. The top value for the table header must be the same as the navigation height, in this case 5rem so it can stack right below the navigation, not under it.

I think you also might have to remove class="overflow-x-scroll" from the div containing your table.

Here's an example.

th {
  position: sticky;
  top: 5rem;
  background: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
<div class="bg-gray-100 relative pb-20">
  <header class="sticky top-0 flex items-center justify-center bg-gray-300 mb-10 h-20 z-50">Header goes here</header>
  <section class="max-w-xl mx-auto bg-white mb-20">
    <div>
      <table>
        <thead>
          <tr>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
            <th>Sticky Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
          <tr>
            <td>Sticky Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
            <td>Normal Column</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</div>

user_79569330
Related