I have this unique problem with html tables.
What I hope to achieve:
What I have done
What problems I am facing
techonologies
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>
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>