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>
2
Answers
So I fixed this with a couple of actions:
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.