Scroll 似乎无法顺风运行 css

Question

嗨，我是 tailwind 的初学者 css，我想要的只是我遇到的一个问题我想创建一个可滚动的视图，其中标题标题保留在原位，数据位于标题下方在 table 中可以滚动但是当我使用 flex flex-col

卷轴似乎在工作，但数据似乎收缩但一旦我删除 flex flex-col 它回到原来的位置，但滚动不起作用。你能告诉我我该怎么做吗？我希望标题保留在原位，但数据应该是 scrollable.Please 请注意，此 table.I 顶部有一个搜索栏 table 也希望 table 是静态的，这样可以看到 top-0 对我不起作用。这是我的代码。

<div className="mt-5 overflow-x-auto rounded-lg">
          <table className=" h-80 w-full text-left text-sm text-gray-400">
            <thead className="bg-[#292A33] text-xs uppercase">
              <tr className="">
                <th className=" px-6 py-3">
                  nft Name
                </th>
                <th className=" px-6 py-3">
                  nft Status
                </th>
                <th className=" px-6 py-3">
                  nft Size
                </th>
                <th className=" px-6 py-3">
                  nft Type
                </th>
                <th className=" px-6 py-3">
                  nft Origin
                </th>
                <th className=" px-6 py-3">
                  nft Image
                </th>
                <th className=" px-6 py-3">
                  Total Price
                </th>
              </tr>
            </thead>

            <tbody className="overflow-y-scroll">
              {nftinfo.map((nft) => (
                <tr className=" hover:bg-zinc-700 ">
                  <th scope="row" className="px-6 py-4 font-medium text-white ">
                    
                  </th>
                  <td className="px-6 py-4">{nft.status}</td>
                  <td className="px-6 py-4">{nft.size}</td>
                  <td className="px-6 py-4">{nft.type}</td>
                  <td className="px-6 py-4">{nft.origin}</td>
                  <td className="px-6 py-4">{nft.image}</td>
                  <td
                    className={`px-6 py-4 ${
                      nft.totalprice > 5000
                        ? ` text-green-500`
                        : `text-red-500`
                    }`}
                  >
                    $ {nft.totalprice}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

Answer 1

您可以使用我创建的以下 table，只需确保将 class 替换为 className 并进行相应更改即可。

尝试使用 full page 观看下面的代码，因为它是 desktop screen 的，如果需要，可以根据移动视图进行更改。

<script src="https://cdn.tailwindcss.com"></script>

<div class="container m-auto p-4">
  <h1 class="mb-8 text-center text-3xl font-bold">Scrollable Table Fixed Height</h1>

  <table class="w-full border-[1px] border-black text-left">
    <thead class="flex w-full bg-[#292A33] text-xs text-gray-400">
      <tr class="flex w-full hover:bg-zinc-700">
        <th class="w-1/4 p-4">NFT NAME</th>
        <th class="w-1/4 p-4">NFT STATUS</th>
        <th class="w-1/4 p-4">NFT SIZE</th>
        <th class="w-1/4 p-4">NFT TYPE</th>
        <th class="w-1/4 p-4">NFT ORIGIN</th>
        <th class="w-1/4 p-4">NFT IMAGE</th>
        <th class="w-1/4 p-4">TOTAL PRICE</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 w-full flex-col items-center justify-between overflow-y-scroll bg-white text-gray-400" style="height: 60vh;">
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
      <tr class="flex w-full hover:bg-zinc-700">
        <td class="w-1/4 p-4">nft.name</td>
        <td class="w-1/4 p-4">nft.status</td>
        <td class="w-1/4 p-4">nft.size</td>
        <td class="w-1/4 p-4">nft.type</td>
        <td class="w-1/4 p-4">nft.origin</td>
        <td class="w-1/4 p-4">nft.image</td>
        <td class="w-1/4 p-4">total price</td>
      </tr>
    </tbody>
  </table>
</div>

Scroll 似乎无法顺风运行 css

Scroll seems to be not working in tailwind css

scroll

overflow

reactjs

next.js

tailwind-css