如果我包含一个名称，并在检查模式下使用该名称导航到光标，则填充将显示在名称之前而不是之后，如图所示。如何修复此问题enter image description here

<div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center h-5">
                        <input id="candidates" name="candidates" type="checkbox"
                            class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    Name
                </th>
                <th scope="col" class="px-6 py-3">
                    In Time
                </th>
                <th scope="col" class="px-6 py-3">
                    Approved By
                </th>
                <th scope="col" class="px-6 py-3">
                    Status
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td scope="row" class="px-6 py-4">
                    <div class="flex items-center h-5">
                        <input id="candidates" name="candidates" type="checkbox"
                            class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                    </div>
                </td>
                <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    <div class="flex items-center gap-2">
                        <img class="w-10 h-10 rounded-full"
                            src="https://geeks-react.netlify.app/static/media/avatar-1.d2fd9642fd3628734b27.jpg"
                            alt="">
                        <a href="employee-detail.html"
                            class="inline-block font-semibold text-blue-600">Adolph Blaine Charles David Earl Frederick Gerald</a>
                    </div>
                </td>
                <td class="px-6 py- whitespace-nowrap">
                    <span class="text-gray-600">
                        In : 02-06-2022 09:05 AM</span></br>
                    <span class="text-gray-600"> Out :
                        02-06-2022 05:07 PM</span>
                </td>
                <td class="px-6 py-4">
                    <span class="text-gray-600">
                        Prem</span>
                </td>
                <td class="px-6 py-4">
                    <div class="p-1 text-xs font-semibold text-center text-white bg-yellow-600 rounded-full">
                        Pending</div>                </td>
                       
            </tr>
            
        </tbody>
    </table>
</div>

我想在名称结尾后显示填充。则每列仅正确显示空间