Tailwind css table 固定 header 并垂直滚动 tbody
Tailwind css table with fixed header and scrolling tbody vertically
我有下面的代码 table 基于 tailwind css。
如果我删除 block class，table 将不再可滚动。
将 block class 添加到 tbody 会破坏 thead。请参阅所附图片。
CodePen 如果你想玩代码。 https://codepen.io/hirani89/pen/wvyJKqO?editors=1010
<div class="address">
<h1 class="font-medium leading-tight text-3xl mt-0 mb-2">Recipient</h1>
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="my-2 flex sm:flex-row flex-col">
<div class="block w-1/3 relative">
<span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
<path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z">
</path>
</svg>
</span>
<input autocomplete="off" wire:model.debounce.500ms="query" placeholder="Search" class="appearance-none rounded-r rounded-l border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none">
</div>
</div>
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class="h-96 block overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
在 tbody 中没有 block class（禁用滚动）
block class 在 tbody 中（滚动有效但 header 中断）
这是我想出的解决方案。
<script src="https://cdn.tailwindcss.com"></script>
<div class="container p-4">
<h1 class="mt-0 mb-2 text-3xl font-medium leading-tight">Recipient</h1>
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="my-2 flex flex-col sm:flex-row">
<div class="relative block w-1/3">
<span class="absolute inset-y-0 left-0 flex h-full items-center pl-2">
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
<path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"></path>
</svg>
</span>
<input autocomplete="off" wire:model.debounce.500ms="query" placeholder="Search" class="block w-full appearance-none rounded-r rounded-l border border-b border-gray-400 bg-white py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 focus:bg-white focus:text-gray-700 focus:placeholder-gray-600 focus:outline-none" />
</div>
</div>
<table class=" border-[1px] border-black text-left">
<thead class="">
<tr class="text-left flex justify-items-start">
<th class="text-md px-6 py-4 font-medium text-gray-900 ">Select</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Company</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Address</th>
</tr>
</thead>
<!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->
<tbody class="flex flex-col items-center justify-items-start overflow-y-scroll bg-white text-gray-400" style="height: 50vh;">
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEEEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
您可以将 max-height 添加到 table 的父级 div 和
为您的 thead
设置 position:sticky 和 top:0
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<!-- other table content -->
<tbody></tbody>
</thead>
</table>
</div>
例子
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<main>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
<form class="mb-4" method="POST" action="https://shipping.local/login">
<div class="address">
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class=" h-96 overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
简而言之css:
.table-wrp {
max-height: 75vh;
overflow-y: auto;
display:block;
}
thead{
position:sticky;
top:0
}
我有下面的代码 table 基于 tailwind css。
如果我删除 block class，table 将不再可滚动。
将 block class 添加到 tbody 会破坏 thead。请参阅所附图片。
CodePen 如果你想玩代码。 https://codepen.io/hirani89/pen/wvyJKqO?editors=1010
<div class="address">
<h1 class="font-medium leading-tight text-3xl mt-0 mb-2">Recipient</h1>
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="my-2 flex sm:flex-row flex-col">
<div class="block w-1/3 relative">
<span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
<path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z">
</path>
</svg>
</span>
<input autocomplete="off" wire:model.debounce.500ms="query" placeholder="Search" class="appearance-none rounded-r rounded-l border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none">
</div>
</div>
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class="h-96 block overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
在 tbody 中没有 block class（禁用滚动）
block class 在 tbody 中（滚动有效但 header 中断）
这是我想出的解决方案。
<script src="https://cdn.tailwindcss.com"></script>
<div class="container p-4">
<h1 class="mt-0 mb-2 text-3xl font-medium leading-tight">Recipient</h1>
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="my-2 flex flex-col sm:flex-row">
<div class="relative block w-1/3">
<span class="absolute inset-y-0 left-0 flex h-full items-center pl-2">
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
<path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"></path>
</svg>
</span>
<input autocomplete="off" wire:model.debounce.500ms="query" placeholder="Search" class="block w-full appearance-none rounded-r rounded-l border border-b border-gray-400 bg-white py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 focus:bg-white focus:text-gray-700 focus:placeholder-gray-600 focus:outline-none" />
</div>
</div>
<table class=" border-[1px] border-black text-left">
<thead class="">
<tr class="text-left flex justify-items-start">
<th class="text-md px-6 py-4 font-medium text-gray-900 ">Select</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Company</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Address</th>
</tr>
</thead>
<!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->
<tbody class="flex flex-col items-center justify-items-start overflow-y-scroll bg-white text-gray-400" style="height: 50vh;">
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEEEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
您可以将 max-height 添加到 table 的父级 div 和
为您的 thead
position:sticky 和 top:0
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<!-- other table content -->
<tbody></tbody>
</thead>
</table>
</div>
例子
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<main>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
<form class="mb-4" method="POST" action="https://shipping.local/login">
<div class="address">
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class=" h-96 overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
简而言之css:
.table-wrp {
max-height: 75vh;
overflow-y: auto;
display:block;
}
thead{
position:sticky;
top:0
}