Scroll seems to be not working in tailwind css

Question

Hi I am a beginner to tailwind css and all i want is a problem that has been occuring to me I want to create a scrollable view with the title headings staying in place and the data below the heading in the table to be scrollable but when I use flex flex-col

the scroll seems to be working but the data seems to contract but as soon as I remove flex flex-col it comes back to the position but the scroll doesn't work. Can you please say me how do I do it 🙏. I want the title to stay in place but the data should be scrollable.Please note that there is a search bar on top of this table.I want the table to be static also and be seen so top-0 didn't work for me. This is my code 👇.

<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

You can use the below table to I have created, just make sure to replace class to className and do changes accordingly.

Try to watch the below code with full page as it is for desktop screen and do changes according to mobile view if you want.

<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>