csstailwind-csstailwind-3
Tailwind css table with fixed header and scrolling tbody vertically
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)
With block class in tbody (scroll works but header breaks)
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">
<!-- table head content -->
</thead>
<tbody class="h-96 overflow-y-auto">
<!-- table body content -->
</tbody>
</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
}
- How memory address for pointer to arrays is same as an element in 2D array?
- How to use ellipsis in c's case statement?
- Fast & accurate atan/arctan approximation algorithm
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- Avoiding strcpy overflow destination warning
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended
- How to refactor repetition inside a Makefile?
- Why does an empty preprocessor command still evaluate to something?
- How to implement variable sized array within C struct
- Character array typecasting to integer
- Handling HTTP Headers in a Minimal C HTTP Server
- How to get the sign, mantissa and exponent of a floating point number
- Why do MCU libraries use logic operations instead of bitfield structs?