Tailwind css table with fixed header and scrolling tbody vertically

Issue

I have the code below for a table based on tailwind css.

If I remove the block class, the table is not scrollable anymore.

Adding the block class to tbody breaks the thead. See Images attached.

CodePen if you want to play with the code. https://codepen.io/hirani89/pen/wvyJKqO?editors=1010

<div class="address">
  <h1 class="font-medium leading-tight text-3xl mt-0 mb-2">Recipient</h1>
  <div class="item mb-2 md:flex md:flex-wrap md:justify-between">
    <div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
      <div class="my-2 flex sm:flex-row flex-col">
        <div class="block w-1/3 relative">
          <span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
            <svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
              <path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z">
              </path>
            </svg>
          </span>
          <input autocomplete="off" wire:model.debounce.500ms="query" placeholder="Search" class="appearance-none rounded-r rounded-l border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none">
        </div>
      </div>
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="py-2 inline-block w-full sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table class="w-full">
                <thead class="bg-white border-b">
                  <tr>
                    <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                      Select
                    </th>
                    <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                      Company
                    </th>
                    <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                      Address
                    </th>
                  </tr>
                </thead>
                <tbody class="h-96 block overflow-y-auto">
                  <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" name="address" value="1">
                    </td>
                    <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      BATHURST </td>
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                  </tr>
                  <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" name="address" value="2">
                    </td>
                    <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      BATHURST
                    </td>
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                  </tr>
                  <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" name="address" value="3">
                    </td>
                    <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      MUDGEE
                    </td>
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                  </tr>
                  <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" name="address" value="4">
                    </td>
                    <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      ORANGE
                    </td>
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                  </tr>
                  <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" name="address" value="5">
                    </td>
                    <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                      TAREN POINT
                    </td>
                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Without block class in tbody (disables scroll)
enter image description here

With block class in tbody (scroll works but header breaks)

enter image description here

Solution

You could add a max-height to your table’s parent div and
set position:sticky and top:0 for your thead

<div class="table-wrp block max-h-96">
  <table class="w-full">
    <thead class="bg-white border-b sticky top-0">
      <!-- other table content -->
      <tbody></tbody>
    </thead>
  </table>
</div>

Example

<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">

  <main>
    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
          <form class="mb-4" method="POST" action="https://shipping.local/login">

            <div class="address">

              <div class="item mb-2 md:flex md:flex-wrap md:justify-between">
                <div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">

                  <div class="flex flex-col">
                    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 inline-block w-full sm:px-6 lg:px-8">

                        <div class="table-wrp block max-h-96">
                          <table class="w-full">
                            <thead class="bg-white border-b sticky top-0">
                              <tr>
                                <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                                  Select
                                </th>
                                <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                                  Company
                                </th>
                                <th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
                                  Address
                                </th>
                              </tr>
                            </thead>
                            <tbody class=" h-96 overflow-y-auto">
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="1">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="2">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="3">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  MUDGEE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="4">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  ORANGE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="5">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  TAREN POINT
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="1">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="2">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="3">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  MUDGEE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="4">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  ORANGE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="5">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  TAREN POINT
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="1">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="2">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  BATHURST
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="3">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  MUDGEE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="4">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  ORANGE
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  <input type="checkbox" name="address" value="5">
                                </td>
                                <td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                  TAREN POINT
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
                <!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->

              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </main>
</div>

In plain css:

.table-wrp  {
  max-height: 75vh;
  overflow-y: auto;
  display:block;
}
thead{
  position:sticky;
  top:0
}

Answered By – herrstrietzel

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.