Tailwind CSS表格列内边距位置异常问题修复咨询

检查表格中姓名元素时，发现padding显示在姓名前方而非后方，导致列间距异常，需要将padding移至姓名末尾以保证布局正常。相关代码如下：

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

问题根源是姓名所在<td>的whitespace-nowrap属性强制内容不换行，加上姓名过长，导致内容溢出<td>边界，视觉上右侧padding被覆盖，仅显示左侧padding。可通过以下方式修复：

方式一：允许姓名换行（保留完整padding） #

移除<td>的whitespace-nowrap类，让过长姓名自动换行，<td>的左右padding即可正常显示：

<td class="px-6 py-4 font-medium text-gray-900 dark:text-white">
    <!-- 内部内容不变 -->
</td>

方式二：强制姓名单行显示并保留右侧padding #

若需姓名保持单行，给包裹姓名的<a>标签添加max-w-[calc(100%-48px)]（减去头像宽度w-10和间距gap-2的总宽度）和truncate类，让过长姓名自动截断并显示省略号，同时保证<td>右侧padding可见：

<a href="employee-detail.html"
   class="inline-block font-semibold text-blue-600 max-w-[calc(100%-48px)] truncate">
    Adolph Blaine Charles David Earl Frederick Gerald
</a>

额外修正：修复In Time列的类名错误 #

In Time列的<td>类名存在语法错误：py-缺少数值，需改为py-4避免布局异常：

<td class="px-6 py-4 whitespace-nowrap">
    <!-- 内部内容不变 -->
</td>

内容的提问来源于stack exchange，提问作者R. Elavarasan