Can someone help to troubleshoot this issue? I want to make the line break while touching the cell’s border, but you can see at the bottom right corner ( Last Row, REASON column) there, the This is a long…..reason didn’t break when it hit the border. I have tried the table-fixed, word-break..methods, all no use for me. May I ask what might be the cause?
(Sorry, the HTML code might look a bit messy as I have been trying a different way.)
<div class="-my-2 overflow-hidden sm:-mx-6">
<div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="divide-y divide-gray-200 table-fixed">
<thead class="bg-gray-50">
<tr>
<th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
Requestor
</th>
......
<th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
Reason
</th>
@can('manage-users')
<th scope="col" class="relative px-6 py-3 bg-gray-200 ">
<span class="sr-only">Edit</span>
</th>
@endif
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($applications as $application)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{{ $application->user->name }}
</div>
<div class="text-sm text-gray-500">
{{ $application->user->email }}
</div>
</div>
</div>
</td>
...
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $application->request_reason }}
</td>
@can('manage-users')
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
wire:click="selectItem({{ $application->id }}, 'Approve')">
Approve
</button>
<button
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
wire:click="selectItem({{ $application->id }}, 'Reject')">
Reject
</button>
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I have added the class break-all to the cell and gave w-full to the <table>. Kindly comment if this is not what you’re looking for.
The break-normal would only work if there are spaces between the content.
You can set a max-width for the cell to limit the width for that specific column.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
<div class="-my-2 overflow-hidden sm:-mx-6">
<div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="divide-y divide-gray-200 table-fixed w-full">
<thead class="bg-gray-50">
<tr>
<th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
Requestor
</th>
<th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
Reason
</th>
<th scope="col" class="relative px-6 py-3 bg-gray-200 ">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
Someone J
</div>
<div class="text-sm text-gray-500">
[email protected]
</div>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-500 break-all">
wefwe wefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0