Tailwind表格粘性表头问题：非粘性行垂直滚动覆盖表头

问题根源 #

1. 破坏表格原生布局：给<tr>添加flex类会打乱表格默认渲染规则，导致<thead>的sticky定位失去正确上下文，无法固定在顶部。
2. 无背景色透显：非粘性单元格未设置背景色，即使z-index层级正确，下方内容也会透过透明区域覆盖表头。
3. 水平粘性定位偏差：原代码中left-*数值计算错误，导致水平粘性列错位，间接影响垂直滚动时的层级显示。

修正方案 #

1. 移除所有<tr>上的flex类，使用table-fixed固定表格布局，保证列宽稳定。
2. 给<thead>直接设置sticky top-0 z-30并添加明确背景色，替代给每个<th>单独设置粘性的方式。
3. 给tbody的非粘性单元格添加bg-white，避免内容透显。
4. 修正水平粘性列的left-*数值，确保列与列之间无重叠（按列宽依次累加）。
5. 统一z-index层级：表头整体z-30，水平粘性列z-20，tbody普通单元格z-10。

修正后的完整代码 #

<script>
    let columns = 10;
    let rows = 6;
</script>

<div class="overflow-x-auto overflow-y-auto max-h-[400px]">
  <table class="table-auto table-fixed border-collapse bg-white w-full">
    <!-- 表头：整体粘性，z-index最高 -->
    <thead class="sticky top-0 z-30 bg-gray-300">
      <tr>
        <!-- 水平粘性列：left值按列宽累加 -->
        <th class="sticky left-0 z-20 border border-gray-400 p-1 w-30">Sticky Header 1</th>
        <th class="sticky left-30 z-20 border border-gray-400 p-1 w-30">Sticky Header 2</th>
        <th class="sticky left-60 z-20 border border-gray-400 p-1 w-30">Sticky Header 3</th>
        <th class="sticky left-90 z-20 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">Non Sticky Header {i+1}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
        {#each {length: rows} as _, j}
          <tr>
            <!-- 行内水平粘性列 -->
            <td class="sticky left-0 z-20 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Record 1</td>
            <td class="sticky left-30 z-20 bg-gray-300 border border-gray-400 p-1 w-30">sticky Record 2</td>
            <td class="sticky left-60 z-20 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Record 3</td>
            <td class="sticky left-90 z-20 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Record 4</td>
            {#each {length: columns} as _, i}
            <!-- 非粘性单元格添加背景色，z-index最低 -->
            <td class="border border-gray-400 p-1 bg-white z-10">Non Sticky Record {i+1}</td>
            {/each}
          </tr>
        {/each}
    </tbody>
  </table>
</div>

关键说明 #

• 使用table-fixed后，列宽由w-*类严格控制，避免滚动时列宽变化导致的错位。
• <thead>作为整体设置sticky，比单独给每个<th>设置更稳定，且能保证整个表头的层级统一。
• 非粘性单元格的bg-white是解决透显问题的核心，即使z-index正确，透明背景仍会让下方内容显示出来。

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