Tailwind CSS粘性表头与分区标题对齐问题解决问询

问题说明 #

制作带粘性表头和红色分区标题的Tailwind表格时，出现对齐异常：

• 使用top-11只能近似对齐，滚动时分区标题会被表头遮挡几个像素
• 设置top-0会完全遮挡分区标题
• 设置top-12则表头与分区标题间出现间隙，能看到下方滚动的文本

解决方案 #

1. 修复无效HTML结构 #

表格内直接嵌套<div>不符合HTML规范，会干扰浏览器的表格布局计算，需移除<thead>与<tbody>之间的<div>标签。

2. 精确设置分区标题的top值 #

表头的<th>使用了py-3.5（上下内边距各14px，合计28px）+ border-b（1px边框），总高度为29px。因此分区标题的top值应设为top-[29px]，刚好贴合表头底部。

3. 确保层级正确 #

保持表头z-20、分区标题z-10的层级关系，保证表头始终在分区标题上方。

修改后的完整代码 #

<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>
        <tbody>
          <tr>
            <td colspan="3" class="sticky top-[29px] 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-[29px] 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-[29px] 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>
      </table>
    </div>
    <div class="border-t p-1 px-4 py-2">Showing 10 Items</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者ToxicTomato