基于Tailwind实现固定表头与首列的类Excel表格布局需求

你之前的实现问题在于把每行单独设置了滚动容器，导致各行滚动独立。下面是修正后的完整方案，实现类似Excel的冻结窗格效果，首行和首列固定，内容区域统一滚动：

<div class="relative w-full h-96 overflow-hidden">
  <!-- 左上角固定单元格 -->
  <div class="absolute top-0 left-0 w-64 h-16 bg-gray-700 text-white flex items-center justify-center font-bold z-30">
    Task/Date
  </div>

  <!-- 顶部固定表头行 -->
  <div class="absolute top-0 left-64 right-0 h-16 bg-gray-600 text-white flex overflow-hidden z-20">
    <div class="w-64 flex items-center justify-center border-r border-gray-500">2024-01-01</div>
    <div class="w-64 flex items-center justify-center border-r border-gray-500">2024-01-02</div>
    <div class="w-64 flex items-center justify-center border-r border-gray-500">2024-01-03</div>
    <div class="w-64 flex items-center justify-center border-r border-gray-500">2024-01-04</div>
    <div class="w-64 flex items-center justify-center">2024-01-05</div>
  </div>

  <!-- 左侧固定列 -->
  <div class="absolute top-16 left-0 w-64 bottom-0 bg-gray-600 text-white overflow-y-auto z-20">
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 1</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 2</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 3</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 4</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 5</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 6</div>
    <div class="h-16 flex items-center justify-center border-b border-gray-500">Task 7</div>
    <div class="h-16 flex items-center justify-center">Task 8</div>
  </div>

  <!-- 可滚动的内容区域 -->
  <div class="absolute top-16 left-64 right-0 bottom-0 overflow-auto">
    <div class="flex flex-col">
      <!-- 数据行 -->
      <div class="flex">
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
      </div>
      <div class="flex">
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
      </div>
      <div class="flex">
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
      </div>
      <div class="flex">
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Pending</div>
        <div class="w-64 h-16 flex items-center justify-center border border-gray-300 bg-white">Done</div>
      </div>
    </div>
  </div>
</div>

关键实现逻辑 #

• 用相对定位的父容器作为所有元素的定位基准
• 左上角单元格、顶部表头、左侧列通过绝对定位固定在对应位置，设置z-index确保它们在内容区域上方，避免滚动时被遮挡
• 左侧列单独设置overflow-y-auto，当任务列表过长时可垂直滚动
• 核心内容区域统一放在top-16 left-64的绝对定位容器里，设置overflow-auto实现同时支持水平和垂直滚动，彻底解决每行独立滚动的问题
• 统一所有单元格的宽高（如w-64 h-16），保证表格对齐

优化建议 #

• 可用Tailwind断点类（如md:w-72）实现响应式单元格宽度调整
• 启用Tailwind scrollbar插件后，可添加scrollbar-thin scrollbar-thumb-gray-400等类自定义滚动条样式
• 给固定元素添加shadow-md增强视觉层级，避免内容滚动时的穿透感

内容的提问来源于stack exchange，提问作者Piotr Żęgota