How to make a table scrollable horizontally not the whole page using Tailwind CSS?

Question

My Code which is not working. I have written this code for table and I want to fix its width and height and for mobile view it should be horizontally scrollable.

Please suggest some solutions to this problem.

I have tried everything from overflow-x-scroll and setting height of the div as fix and blocks but nothing worked.

<div class="table-wrp block min-h-96">
  <table class="w-full">
      <thead class="bg-white border-b sticky top-0">
          <th scope="col" bgcolor="#45abe0" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 1</th>
          <th scope="col" bgcolor="#ff661b" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 2</th>
          <th scope="col" bgcolor="#0099a8" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 3</th>
          <th scope="col" bgcolor="#00539f" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 4</th>
          <th scope="col" bgcolor="#76bc21" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 5</th>
          </th>
      </thead>
      <tr class="flex-none flex-shrink-0">
          <td scope="col" bgcolor="#74c0e8" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">
              <h4>Getting Help Early</h4>
          </td>
          <td scope="col" bgcolor="#ff8c54" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">
              <h4>Getting the Best Possible Care&nbsp;</h4>
          </td>
          <td scope="col" bgcolor="#40b2be" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">
              <h4>Getting Diverted from Justice System Involvement</h4>
          </td>
          <td scope="col" bgcolor="#407eb7" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">
              <h4>Research Updates</h4>
          </td>
          <td scope="col" bgcolor="#9bcd61" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">
              <h4>Youth Voices</h4>
          </td>
      </tr>
      <tr>
          <td bgcolor="#fdedcc" colspan="5" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon#Research_Plenary" style="font-size:12px;line-height:normal;">Plenary with Joshua Gordon, M.D., Ph.D. Director of the National Institute of Mental Health</a></td>
      </tr>
      <tr>
          <td bgcolor="#fdedcc" colspan="5" class="border-1 border-solid border-white p-4 text-xs font-bold  text-center"><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon#Trauma" style="font-size:12px;line-height:normal;">The Psychological Toll of Racial Trauma on African Americans: A Panel Discussion</a></td>
      </tr>
      <tr>
          <td bgcolor="#d1eaf7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Taking" style="font-size:12px;line-height:normal;">Taking NAMI Ending the Silence Statewide</a></p>
          </td>
          <td bgcolor="#ffd9c6" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Rethinking" style="font-size:12px;line-height:normal;">Rethinking Diversity, Equality and Inclusion</a></p>
          </td>
          <td bgcolor="#bfe5e9" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Crisis_Hotlines" style="font-size:12px;line-height:normal;">Crisis Hotlines: The Gateway to Crisis Systems&nbsp;</a></p>
          </td>
          <td bgcolor="#bfd4e7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#CBT" style="font-size:12px;line-height:normal;">CBT for Psychosis: Evidence-based Training Program for Family and Caregivers</a></p>
          </td>
          <td bgcolor="#bddd96" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Importance" style="font-size:12px;line-height:normal;">The Importance of Youth Voice: A Panel Discussion</a></p>
          </td>
      </tr>
      <tr>
          <td bgcolor="#d1eaf7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Black_Youth" style="font-size:12px;line-height:normal;">What Is Behind the Increasing Suicide Rate Among Black Youth?</a></p>
          </td>
          <td bgcolor="#ffd9c6" class="border-1 border-solid border-white p-4 text-xs font-bold  text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Engaging_Faith" style="font-size:12px;line-height:normal;">Engaging Faith Leaders in Addressing Mental Illness</a></p>
          </td>
          <td bgcolor="#bfe5e9" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Hero" style="font-size:12px;line-height:normal;">Hero Help Addiction and Behavioral Health Assistance</a></p>
          </td>
          <td bgcolor="#bfd4e7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Fusion" style="font-size:12px;line-height:normal;">The Fusion Model: A Peer-Informed Model for Crisis Support</a></p>
          </td>
          <td bgcolor="#bddd96" class="border-1 border-solid border-white p-4 text-xs font-bold text-center">
              <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#NAMI-Ending" style="font-size:12px;line-height:normal;">NAMI Ending the Silence (ETS) for Students</a></p>
          </td>
      </tr>
  </table>
</div>

Answer 1

It seems like you want to create a table with fixed width and height and make it horizontally scrollable on mobile devices. I noticed that you are using tailwind CSS classes to style your table. To achieve the desired behavior, you can make the following changes to your code:

1. Wrap the table inside a container div with a fixed height and set its overflow to auto to enable scrolling:

<div class="table-wrp block min-h-96 overflow-x-auto">
    <table class="w-full">
        <!-- Your table content goes here -->
    </table>
</div>

2. Modify the table structure and remove the unnecessary classes to make it simpler:

<div class="table-wrp block min-h-96 overflow-x-auto">
    <table class="w-full">
        <thead class="bg-white border-b sticky top-0">
            <tr>
                <th bgcolor="#45abe0" class="p-4 text-xs font-bold text-white text-center">TRACK 1</th>
                <th bgcolor="#ff661b" class="p-4 text-xs font-bold text-white text-center">TRACK 2</th>
                <th bgcolor="#0099a8" class="p-4 text-xs font-bold text-white text-center">TRACK 3</th>
                <th bgcolor="#00539f" class="p-4 text-xs font-bold text-white text-center">TRACK 4</th>
                <th bgcolor="#76bc21" class="p-4 text-xs font-bold text-white text-center">TRACK 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td bgcolor="#74c0e8" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting Help Early</h4>
                </td>
                <td bgcolor="#ff8c54" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting the Best Possible Care&nbsp;</h4>
                </td>
                <td bgcolor="#40b2be" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Getting Diverted from Justice System Involvement</h4>
                </td>
                <td bgcolor="#407eb7" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Research Updates</h4>
                </td>
                <td bgcolor="#9bcd61" class="p-4 text-xs font-bold text-white text-center">
                    <h4>Youth Voices</h4>
                </td>
            </tr>
            <!-- Additional table rows here -->
        </tbody>
    </table>
</div>

3. Additionally, make sure to set the viewport meta tag in the head section of your HTML to ensure proper rendering on mobile devices:

<head>
    <!-- Other meta tags and stylesheets -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

With these changes, your table should have a fixed width and height and be horizontally scrollable on mobile devices.