3

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.)

enter image description here

<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>
4
  • Try setting a maximum width for the cell
    – Ajith Gopi
    Apr 22, 2021 at 9:48
  • @AjithGopi the cell did become smaller but the line doesn't wrap
    – Hanyi Koh
    Apr 22, 2021 at 9:54
  • Try adding the class break-normal
    – Ajith Gopi
    Apr 22, 2021 at 10:05
  • @AjithGopi Thanks for your reply but not working as well
    – Hanyi Koh
    Apr 22, 2021 at 10:09

1 Answer 1

5

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="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">
                    someone@gmail.com
                  </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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.