'How to create a "scrollable view" in React using tailwindcss
Hi I am a beginner to tailwind CSS and I just want to know how do I make the table heading (Person, Age) stay still/fixed but the data (Chris, Dennis etc.) below it to be scrollable so that the user can go through all the data.I want the table rows to go underneath the table title.I want the answer in tailwind css please. Help me 🙏
Solution 1:[1]
You have to add overflow-y-scroll in the tbody tag
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col h-screen">
<div class="flex-grow">
<table class="relative w-full border">
<thead>
<tr>
<th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Person</th>
<th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Age</th>
</tr>
</thead>
<tbody class="divide-y bg-red-100 overflow-y-scroll">
<tr>
<td class="px-6 py-4 text-center">Chris</td>
<td class="px-6 py-4 text-center">38</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Dennis</td>
<td class="px-6 py-4 text-center">45</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Sarah</td>
<td class="px-6 py-4 text-center">29</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Karen</td>
<td class="px-6 py-4 text-center">47</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Paul</td>
<td class="px-6 py-4 text-center">18</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Jhon</td>
<td class="px-6 py-4 text-center">25</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Chris</td>
<td class="px-6 py-4 text-center">38</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Dennis</td>
<td class="px-6 py-4 text-center">45</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Sarah</td>
<td class="px-6 py-4 text-center">29</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Karen</td>
<td class="px-6 py-4 text-center">47</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Paul</td>
<td class="px-6 py-4 text-center">18</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Jhon</td>
<td class="px-6 py-4 text-center">25</td>
</tr><tr>
<td class="px-6 py-4 text-center">Chris</td>
<td class="px-6 py-4 text-center">38</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Dennis</td>
<td class="px-6 py-4 text-center">45</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Sarah</td>
<td class="px-6 py-4 text-center">29</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Karen</td>
<td class="px-6 py-4 text-center">47</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Paul</td>
<td class="px-6 py-4 text-center">18</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Jhon</td>
<td class="px-6 py-4 text-center">25</td>
</tr>
</tbody>
</table>
</div>
</div>Solution 2:[2]
Try this
<div class="flex flex-col h-screen">
<div class="flex-grow overflow-auto">
<table class="relative w-full border">
<thead>
<tr>
<th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Person</th>
<th class="sticky top-0 px-6 py-3 text-red-900 bg-red-300">Age</th>
</tr>
</thead>
<tbody class="divide-y bg-red-100">
<tr>
<td class="px-6 py-4 text-center">Chris</td>
<td class="px-6 py-4 text-center">38</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Dennis</td>
<td class="px-6 py-4 text-center">45</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Sarah</td>
<td class="px-6 py-4 text-center">29</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Karen</td>
<td class="px-6 py-4 text-center">47</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Paul</td>
<td class="px-6 py-4 text-center">18</td>
</tr>
<tr>
<td class="px-6 py-4 text-center">Jhon</td>
<td class="px-6 py-4 text-center">25</td>
</tr>
</tbody>
</table>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | mohit maroliya |
| Solution 2 | PatersonCode |