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>
break-normal