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)
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
}
This is the solution i come up with .
<script src="https://cdn.tailwindcss.com"></script>
<div class="container p-4">
<h1 class="mt-0 mb-2 text-3xl font-medium leading-tight">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 flex-col sm:flex-row">
<div class="relative block w-1/3">
<span class="absolute inset-y-0 left-0 flex h-full 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="block w-full appearance-none rounded-r rounded-l border border-b border-gray-400 bg-white py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 focus:bg-white focus:text-gray-700 focus:placeholder-gray-600 focus:outline-none" />
</div>
</div>
<table class=" border-[1px] border-black text-left">
<thead class="">
<tr class="text-left flex justify-items-start">
<th class="text-md px-6 py-4 font-medium text-gray-900 ">Select</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Company</th>
<th class="text-md px-6 py-4 font-medium text-gray-900">Address</th>
</tr>
</thead>
<!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->
<tbody class="flex flex-col items-center justify-items-start overflow-y-scroll bg-white text-gray-400" style="height: 50vh;">
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEEEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="1" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="2" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">BATHURST</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="3" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">MUDGEE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="4" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">ORANGE</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
<tr class="border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100">
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
<input type="checkbox" name="address" value="5" />
</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900">TAREN POINT</td>
<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">Address Here Address Here Address Here Address Here Address Here Address Here</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Related
I'm trying to make a word wrapper inside a table row, using Tailwind CSS, and it doesn't seem to be working. What am I doing wrong?
I am:
Making the table a: "w-full"
Making the td and the p a "break-all"
Giving a max width to the tr
This is the code:
<div className="py-5 ">
<div className="overflow-x-auto">
<table className="w-full max-w-4xl mx-auto overflow-hidden bg-white divide-y divide-gray-300 rounded-lg whitespace-nowrap">
<thead className="bg-gray-900">
<tr className="text-left text-white">
<th className="px-6 py-4 text-lg font-semibold "> n ° </th>
<th className="px-3 py-4 text-lg font-semibold "> Song </th>
<th className="px-3 py-4 text-lg font-semibold text-center "> Best Singers </th>
<th className="px-6 py-4 text-lg font-semibold text-center"> </th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tr className="max-w-xs break-words">
<td className="px-6 py-4">
<div className="flex items-center space-x-3">
<p>
1
</p>
</div>
</td>
<td
style={{ maxWidth: '100px' }}
className="px-3 py-4 break-all"
>
<p
className="break-all"
>
Vivin la vida loca dsadasdasdasd dasdddddddd saddasdasdad
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Donkey
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Ricky Martin
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is how it looks:
You just need to remove the whitespace-nowrap from the table, then it should work.
Uploaded the example here: https://stackblitz.com/edit/react-ewzbi6?file=src/App.js
Might be another part of your styling affecting things here. This works for me:
Don't mean this as an answer, just can't attach pics to comments.
I am trying to group table rows using tailwind and custom CSS like the below screenshot:
I have done something similar like the screenshot but the issue is I want the total and Grade data in the middle, here is my code:
<div className="container mx-auto overflow-x-auto border-x border-t my-10">
<table className="table-auto w-full">
<thead className="border-b">
<tr
style={{ backgroundColor: "#5CB25A" }}
className="text-white font-bold h-10"
>
<th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
Subject Code
</th>
<th className="text-center md:p-4 p-0 md:w-96 w-none ">
Subject Name
</th>
<th
colSpan={3}
className="text-center p-4 border border-t-0 border-gray-300"
>
Marks
</th>
<th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
Grade
</th>
</tr>
<tr
style={{ backgroundColor: "#5CB25A" }}
className="border-b border-gray-400 font-bold h-10 text-white"
>
<th className="text-center p-4 border-r text-base"></th>
<th className="text-center p-4"></th>
<th className="text-center p-4 border ">Theory</th>
<th className="text-center p-4 border ">MCQ</th>
<th className="text-center p-4 border ">Total</th>
<th className="text-center p-4"></th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-gray-50 text-center border-b-0 border-b-none h-10">
<td className="p-0 border-l border-r">001</td>
<td className="p-0 border-l border-r">English 1</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r"></td>
<td className="p-0 border-l border-r"></td>
</tr>
<tr className="border -b border-t-0 hover:bg-gray-50 text-center h-10">
<td className="p-0 border-l border-r">001</td>
<td className="p-0 border-l border-r">English 1</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">80</td>
<td className="p-0 border-l border-r">A+</td>
</tr>
<tr className="border-b hover:bg-gray-50 text-center h-10">
<td className="p-4 border">001</td>
<td className="p-4 border">English 1</td>
<td className="p-4 border">40</td>
<td className="p-4 border">40</td>
<td className="p-4 border"></td>
<td className="p-4 border">A+</td>
</tr>
</tbody>
</table>
</div>
Above code UI:
As you can see the total and grade are not in the middle because I have used table rows for the group row.
First I would like you to suggest to remove style={{ backgroundColor: "#5CB25A" }} and add bg-[#5CB25A] in <thead> tag.
<thead class="border-b bg-[#5CB25A]">
Secondly to center, you can use class flex items-center justify-center to center the Grade vertically.
You can also make use of grid class properties to create this table like below
<script src="https://cdn.tailwindcss.com"></script>
<div class="m-2 grid grid-cols-6 bg-gray-50 outline outline-1">
<!-- table head starts -->
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Code</div>
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Name</div>
<div class="col-span-3 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Marks</div>
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Grade</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Theory</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">MCQ</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Total</div>
<!-- table head ends -->
<!-- table body starts -->
<div class="flex items-center justify-center border-[1px] border-b-0 py-4">
001<br />
001
</div>
<div class="flex items-center justify-center border-[1px] border-b-0">English 1<br />English 1</div>
<div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
<div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
<div class="flex items-center justify-center border-[1px] border-b-0">80</div>
<div class="flex items-center justify-center border-[1px] py-2">A+</div>
<div class="flex items-center justify-center border-[1px] py-2">001</div>
<div class="flex items-center justify-center border-[1px] py-2">English 1</div>
<div class="flex items-center justify-center border-[1px] py-2">40</div>
<div class="flex items-center justify-center border-[1px] py-2">40</div>
<div class="flex items-center justify-center border-[1px] py-2">80</div>
<div class="flex items-center justify-center border-[1px] py-2">A+</div>
<!-- table body ends -->
</div>
Don't forgot to replace class with className as you are working with className
I've been trying for hours to center the image in this table, but I cannot make it work. The image is in the middle of this code. I hope this is a workable example.
<table class="container mx-auto mt-2">
<thead>
#foreach($posts as $post)
<tr>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Image</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Status</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Action</th>
</tr>
</thead>
<tbody>
<tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">title</span>
{{ $post->title }}
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Image</span>
<img class=" text-center block w-8 h-8 rounded-full " src="{{ asset('storage/photos/'. $post->image ) }}" />
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Status</span>
#if($post->active )
active
#else
Not active
#endif
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Actions</span>
<x-jet-button wire:click="showEditPostModal({{ $post->id }})" class="bg-green-500">Edit</x-jet-button>
<x-jet-button wire:click="deletePost({{ $post->id}})" class="bg-red-700">Delete</x-jet-button>
</td>
</tr>
#endforeach
</tbody>
</table>
Images in Tailwind are set to block-level by default so they can be centered with CSS properties like margin: 0 auto or with the mx-auto class. Basically element require to be block (has its width) to be centered this way.
In general this guide is very useful to know every possible way of centering elements
you can add the "flex-auto" class.
if you want any things show
I am trying to create a form using Tailwind for a project. For this project I need to create a certain type of input field. When this field is being focused the placeholder of that field should change position on top of the border of the input. Is this possible using Tailwind?
This is my code for the input I am using:
<input
type="text"
name="email"
id="email"
v-model="email"
placeholder="Email address"
class="my-2 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none text-sm"
/>
This is an example of how to input should be displayed when it is being focused:
You can use :
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-[11px] text-gray-900 dark:text-gray-300
bg-white relative px-1 top-2 left-3 w-auto group-focus-within:text-red-600 ">
Email Address
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
Or
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-11 text-gray-900 dark:text-gray-300
bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600 ">
Email Address
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
#tailwind base;
#tailwind components;
#tailwind utilities;
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.0.23"></script>
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-11 text-gray-900 dark:text-gray-300 bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
</div>
<div class="relative z-0 px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold text-[11px] text-gray-900 dark:text-gray-300 bg-white relative px-1 top-2 left-3 w-auto group-focus-within:text-red-600"> Email Address </label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10 bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact#gmail.com" />
</div>
I have a dropdown menu inside one of the columns in a table. When it is exposed, it is either cut off (overflow-hidden) or created a scroll bar (overflow-visible).
How would I get this to just appear over top of the table (or "extend" a parent div so it's all visible) so that the only scroll bar is the usual one in the browser, not this table-specific scroll bar. Code provided below.
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow border-b border-gray-200 sm:rounded-lg overflow-auto">
<div class="flex flex-wrap m-4 justify-between">
<div class="flex items-center">
<div class="beep-label">
#lang('livewire.per_page'):
</div>
<select wire:model="perPage" class="beep-input align-middle w-auto inline-block">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
</div>
<div class="flex">
<div class="beep-label pr-2 flex justify-center items-center h-full text-center">
#lang('one-word.filter'):
</div>
<input wire:model="search" class="beep-input" type="text" placeholder="#lang('livewire.search_users')...">
</div>
</div>
<table class="divide-y divide-gray-200 w-full">
<thead>
<tr>
<th class="beep-table-header h-full align-middle flex">
<div class="align-middle justify-items-auto">
<a wire:click.prevent="sortBy('name')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'name'])
<div class="inline-block">#lang('one-word.name')</div>
</a>
</div>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('users.email')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'users.email'])
#lang('users.beep_email')
</a>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('beep_extension')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'beep_extension'])
#lang('livewire.beep_ext')
</a>
</th>
<th class="beep-table-header text-center">
#lang('one-word.action')
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
#foreach ($contacts as $contact)
<tr #if ($contact->is_active !== true) class="table-danger" #endif>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
#if ($contact->contactable->thumbnail)
<img class="h-10 w-10 rounded-full"
src="{{ $contact->contactable->thumbnail }}"
alt="">
#else
<x-nav.svg-icons icon="user-circle" class="w-3 h-3" />
#endif
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-900">
{{ $contact->name }}
</div>
<div class="text-sm leading-5 text-gray-500">{{ $contact->contactable->email }}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_mail }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_extension }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-center text-sm leading-5 font-medium">
<div x-data="{ open: false }" #keydown.window.escape="open = false" #click.away="open = false" class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button #click="open = !open" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
#lang('one-word.action')
<!-- Heroicon name: chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</div>
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-10">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
#can ('view', $contact->contactable)
#lang('users.view_profile')
#endcan
#can ('update', $contact->contactable)
#lang('one-word.edit')
#lang('livewire.edit_contact_methods')
{{ $contact->is_active ? __('one-word.deactivate') : __('one-word.activate') }}
#endcan
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="p-2 uppercase text-sm bg-gray-200">
{{ $contacts->links() }}
</div>
</div>
</div>
</div>
</div>
And the extracted css components in case they are helpful:
.beep-label {
#apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}
.beep-input {
#apply appearance-none block w-full text-gray-700 border border-gray-500 rounded py-1 px-2 mb-3;
}
.beep-table-header {
#apply px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider;
}