Tailwind CSS实现表格首列固定、其余列水平滚动的方案

Absolutely! You can achieve this fixed first column effect without any JavaScript using Tailwind's built-in utility classes. Here's how to modify your existing table code to match the desired behavior:

Modified Table Code #

<div class="overflow-x-auto">
  <table class="min-w-full divide-y divide-gray-200 relative">
    <thead class="bg-gray-50">
      <tr>
        <!-- Fixed first header column -->
        <th scope="col" class="sticky left-0 z-10 bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
        <th scope="col" class="relative px-6 py-3">
          <span class="sr-only">Edit</span>
        </th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr>
        <!-- Fixed first body column -->
        <td class="sticky left-0 z-10 bg-white px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            <div class="flex-shrink-0 h-10 w-10">
              <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
            </div>
            <div class="ml-4">
              <div class="text-sm font-medium text-gray-900">Jane Cooper</div>
              <div class="text-sm text-gray-500">jane.cooper@example.com</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
          <div class="text-sm text-gray-500">Optimization</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Active </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>
        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
          <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
        </td>
      </tr>
      <!-- More rows will follow the same pattern for the first td -->
    </tbody>
  </table>
</div>

Key Changes Explained #

Let's break down the critical additions that make this work:

• Wrapper Div with overflow-x-auto: This creates the horizontal scroll container for non-fixed columns. Without this, the table would expand to fit all content instead of scrolling.

• Table with relative: Sticky positioning requires a positioned parent. Adding relative to the table ensures sticky columns anchor correctly within the table's bounds.

• First Column Elements with sticky left-0:

  • sticky tells the browser to keep the element fixed once it reaches the edge of the parent container.
  • left-0 anchors the column to the left side of the table.

• z-10 and Background Colors:

  • z-10 ensures the fixed column stays above scrolling columns, preventing content overlap.
  • Matching background colors (bg-gray-50 for headers, bg-white for body rows) hide content behind the sticky column as you scroll, keeping the UI clean.

Notes for Multiple Rows #

Make sure every first <td> in your tbody rows has the sticky left-0 z-10 bg-white classes applied. This ensures consistency across all rows when scrolling.

This approach delivers exactly the fixed first column with horizontal scroll behavior you're targeting—no JavaScript needed!

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