我希望数据表中的第一列是固定的，而其他列可以像链接中一样水平滚动。 https://css-tricks.com/wp-content/uploads/2021/02/CleanShot-2021-02-02-at-08.28.56.mp4 我怎样才能在顺风CSS中做到这一点？或者我需要 JavaScript 吗？
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="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>
<td class="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">[email protected]</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 people... -->
</tbody>
</table>这应该有效
<h1 class="sticky top-0">STICKY</h1>
OndrejHj04在上面的评论中对此给出了完美的答案。我只是将其发布在这里，以便可以轻松找到。你们可以在这里尝试他的代码Play Tailwind CSS。
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase sticky left-0 bg-gray-200 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>
<td class="px-6 py-4 whitespace-nowrap sticky left-0 bg-white">
<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">[email protected]</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>
</tbody>
</table>
<div class="py-12 w-full">
<div class="max-w-7xl mx-auto sm:px-4 lg:px-4">
<tbody class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-2">
<div class="flex flex-col">
<td class="my-2 overflow-x-auto sm:-mx lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-4 lg:px-4">
<div class="shadow overflow-hidden border-b border-gray-100 sm:rounder-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class=" bg-gray-50">
<tr>
<th scope="col"class="px-3 py-4 text-left text-xs font-medium text-gray-500 uppercase sticky left-0 bg-gray-200 tracking-wider">Title</th>
<th scope="col" class="px-3 py-4: text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-3 py-4: 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:h-20:w-30">
<tr>
<td class="px-6 py-4 whitespace-nowrap sticky left-0 bg-white">
<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">[email protected]</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-400">
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>
</tbody>
</table>