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:stickytop: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
}