Search code examples
javascriptreactjsscrolloverflowtailwind-css

How to create a "scrollable view" in React using tailwindcss

enter image description here

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

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