Html Question posted in
Some basic documentation can be found here.

How to make HTML table with very many columns scroll horizontally

I have this unique problem with html tables.

What I hope to achieve:

  • a table within a container surrounded by padding but scrollable horizontally and vertically

What I have done

  • created a table that is vertically scrollable, with frozen row headings.

What problems I am facing

  • inability to pad the table container on the right
  • the horizontal scrolling is displayed but doesn’t work
  • part of the content of the table is hidden.

techonologies

  • html
  • talwind

URL to code pen with code

        <main class="flex-1 p-4 overflow-hidden">
            <div class="bg-[#1D1D1F] shadow sm:rounded-lg h-full">
                <div class="overflow-x-auto h-full">
                    <div class="overflow-y-auto h-full">
                        <table class="min-w-full divide-y divide-gray-200">
                            <!-- Table header -->
                            <thead class="bg-[#1D1D1F] sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 1</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 2</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 3</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 4</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 5</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 6</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 7</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 8</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 1</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 2</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 3</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 4</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 5</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 6</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 7</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 8</th>
                                    <!-- Add more headings as needed -->
                                </tr>
                            </thead>
                            <!-- Table body -->
                            <tbody class="bg-[#1D1D1F] divide-y divide-gray-200">
                                <!-- Loop through your table data here -->                        
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>                       
                                
                                <!-- Repeat rows as needed -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I fixed this with a couple of actions:

    1. Set a specific width and height to the parent container of the element you want to scroll. Make sure it is smaller than the content. This will force the horizontal scroll to appear. Do not use relative width and height.
    2. set the overflow to auto in the parent container.

  2. 0

    Hey your issue can be resolved by adding overflow-auto to the div just below <!-- Main content -->.Small suggestion streamline your code bit more because current code doesn’t look that flexible to work with.

    Below is working example.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-screen flex overflow-hidden bg-black text-gray-100">

    <!-- Sidebar -->
    <aside class="bg-[#1D1D1F] w-64 flex-shrink-0 h-full hidden md:flex md:flex-col fixed">
        <div class="flex items-center">
          <img src="./logo.svg" alt="lorem logo" class="w-10 bg-white p-2 rounded-md"/>
          <h2 class="font-bold ml-2 text-xl">Dashboard</h2>
        </div>
        <div class="flex-grow p-4 overflow-y-auto">
            <!-- Sidebar content here -->
            <nav>
                <ul>
                    <li class="py-2"><a href="#" class="text-white">Dashboard</a></li>
                    <li class="py-2"><a href="#" class="text-white">Menu Item 1</a></li>
                    <li class="py-2"><a href="#" class="text-white">Menu Item 2</a></li>
                    <!-- Add more menu items here -->
                </ul>
            </nav>
        </div>
    </aside>

    <!-- Main content -->
    <div class="flex-1 overflow-auto flex flex-col md:ml-64">
        
        <!-- Header section -->
        <header class="border border-[#363638] bg-[#1D1D1F] p-3">
          <p>Home > Dashboard</p>
          <div class="flex justify-between p-3">
            <p class="text-4xl">Dashboard</p>
            <div class="flex justify-center items center">
              <span><img src="./alert.svg" class="w-6" /></span>
              <span><img src="./message.svg" class="w-6" /></span>
            </div>
          </div>
          <ul class="flex gap-2">
            <li>page 1</li>
            <li>page 2</li>
            <li>page 3</li>
            <li>page 4</li>
          </ul>
        </header>

        <!-- Content section -->
        <main class="flex-1 p-4 overflow-hidden">
            <div class="bg-[#1D1D1F] shadow sm:rounded-lg h-full">
                <div class="overflow-x-auto h-full">
                    <div class="overflow-y-auto h-full">
                        <table class="min-w-full divide-y divide-gray-200">
                            <!-- Table header -->
                            <thead class="bg-[#1D1D1F] sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 1</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 2</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 3</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 4</th>
                                    
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 6</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 7</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heading 8</th>
                                    <!-- Add more headings as needed -->
                                </tr>
                            </thead>
                            <!-- Table body -->
                            <tbody class="bg-[#1D1D1F] divide-y divide-gray-200">
                                <!-- Loop through your table data here -->                        
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <tr>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">1</td>
                                  <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                  <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
                                  <td class="px-6 py-4 whitespace-nowrap">Admin</td>
                                </tr>
                                <!-- Repeat rows as needed -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>

    </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search