带有粘性顶部导航栏的溢出父容器中的粘性表标题

Question

我在容器内有一个表格，希望表格标题在滚动时粘贴在顶部导航（也是粘性的）下方。

我在这里有一个 Tailwind Playground：https://play.tailwindcss.com/OYFqCdJR6f

Answer 1

它不起作用的原因是表头和导航这两个元素都设置为top: 0。 表头的顶部值必须与导航高度相同，在本例中为 5rem，以便它可以堆叠在导航的正下方，而不是在其下方。

我认为您可能还必须从包含您的表格的 div 中删除 class="overflow-x-scroll"。

这是一个例子。

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>