在Grid布局中用Tailwind实现可滚动表格，仅tbody滚动可行吗？

要实现仅<tbody>滚动而表头固定，需调整表格布局结构并保证列宽对齐，以下是适配你3×3 Grid布局的解决方案：

修改后的代码 #

<div class="h-screen w-full grid gap-2 p-2" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);">
  <div class="col-span-2 row-span-2 rounded-xl bg-white overflow-hidden">
    <table class="table-auto w-full block">
      <!-- 表头区域 -->
      <thead class="bg-gray-700 text-white block">
        <tr class="table-row">
          <th class="w-1/4 p-3 text-left">表头1</th>
          <th class="w-1/4 p-3 text-left">表头2</th>
          <th class="w-1/4 p-3 text-left">表头3</th>
          <th class="w-1/4 p-3 text-left">表头4</th>
        </tr>
      </thead>
      <!-- 表体滚动区域 -->
      <tbody class="block overflow-y-auto h-[calc(100%-52px)]">
        <tr class="table-row hover:bg-gray-50">
          <td class="w-1/4 p-3 border-t">内容1</td>
          <td class="w-1/4 p-3 border-t">内容2</td>
          <td class="w-1/4 p-3 border-t">内容3</td>
          <td class="w-1/4 p-3 border-t">内容4</td>
        </tr>
        <!-- 重复多行数据测试滚动 -->
        <tr class="table-row hover:bg-gray-50">
          <td class="w-1/4 p-3 border-t">内容1</td>
          <td class="w-1/4 p-3 border-t">内容2</td>
          <td class="w-1/4 p-3 border-t">内容3</td>
          <td class="w-1/4 p-3 border-t">内容4</td>
        </tr>
        <!-- 可添加更多行数据 -->
      </tbody>
    </table>
  </div>
  <div class="rounded-xl bg-white flex items-center justify-center">02</div>
</div>

关键修改点说明 #

• 容器调整：将外层容器的overflow-auto改为overflow-hidden，避免容器整体滚动，把滚动权限交给<tbody>。
• 表格布局：给<table>添加block类，打破默认表格布局，让<thead>和<tbody>可独立设置为块级元素。
• 表头处理：<thead>设为block，内部<tr>保留table-row类维持行结构；给每个<th>设置一致宽度类（如w-1/4），确保列对齐。
• tbody滚动：<tbody>设为block并添加overflow-y-auto，通过h-[calc(100%-52px)]计算高度（52px为表头大致高度，可按需调整），让tbody占满容器剩余高度并支持滚动。
• 列宽对齐：给<td>设置和<th>相同的宽度类，保证表头与表体列宽一致。

额外优化建议 #

• 若需更精确的高度计算，可给<thead>设置固定高度（如h-13），然后将tbody高度设为h-[calc(100%-theme('height.13'))]，贴合Tailwind设计系统。
• 可给tbody添加scrollbar-thin scrollbar-thumb-gray-300类（需启用Tailwind的scrollbar插件），优化滚动条样式。

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