Padding is not apply for name column in table cell - Tailwindcss

Issue

I applied p-4 on the <th> column for the name but In the output, the name column is added into the next column. refer to the image:

How can this be fixed? Based on the name length, it should grow and also it should not go to w-96.

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="relative">
  <div class="absolute w-full overflow-x-auto">
    <table class="table-auto divide-y divide-gray-200">
      <thead class="whitespace-nowrap bg-blue-600 text-left text-xs font-medium uppercase tracking-wider text-white">
        <tr class="divide-x py-4">
          <th scope="col" class="sticky left-0 z-10 bg-blue-600 p-4">Name</th>
          <th scope="col" class="p-4">Mobile Number</th>
          <th scope="col" class="p-4">Employee Id</th>
          <th scope="col" class="p-4">Branch</th>
          <th scope="col" class="p-4">Department</th>
          <th scope="col" class="p-4">Shift</th>
          <th scope="col" class="p-4">Staff Category</th>
          <th scope="col" class="p-4">Designation</th>
          <th scope="col" class="p-4">Date of Joining</th>
          <th scope="col" class="p-4">Resignation Date</th>
          <th scope="col" class="p-4">Role</th>
          <th scope="col" class="p-4">Company</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 whitespace-nowrap bg-white text-sm">
        <tr>
          <td class="p-4">
            <div class="flex items-center gap-4">
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="" />
              <p>John Doe</p>
            </div>
          </td>
          <td class="p-4">9192939494</td>
          <td class="p-4">NA-1362</td>
          <td class="p-4">Sengodampalayam</td>
          <td class="p-4">Tele Calling 1</td>
          <td class="p-4">Regular Shift</td>
          <td class="p-4">Permanant</td>
          <td class="p-4">Senior Telecaller</td>
          <td class="p-4">28-07-2023</td>
          <td class="p-4">-</td>
          <td class="p-4">Branch Manager</td>
          <td class="p-4">XYZ India Private Limited</td>
        </tr>

        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
</div>

Solution

Consider applying width: max-content to the <div> inside the data row of the Name column. This forces the column width to fully encapsulate the width of its content.

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="relative">
  <div class="absolute w-full overflow-x-auto">
    <table class="table-auto divide-y divide-gray-200">
      <thead class="whitespace-nowrap bg-blue-600 text-left text-xs font-medium uppercase tracking-wider text-white">
        <tr class="divide-x py-4">
          <th scope="col" class="sticky left-0 z-10 bg-blue-600 p-4">Name</th>
          <th scope="col" class="p-4">Mobile Number</th>
          <th scope="col" class="p-4">Employee Id</th>
          <th scope="col" class="p-4">Branch</th>
          <th scope="col" class="p-4">Department</th>
          <th scope="col" class="p-4">Shift</th>
          <th scope="col" class="p-4">Staff Category</th>
          <th scope="col" class="p-4">Designation</th>
          <th scope="col" class="p-4">Date of Joining</th>
          <th scope="col" class="p-4">Resignation Date</th>
          <th scope="col" class="p-4">Role</th>
          <th scope="col" class="p-4">Company</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 whitespace-nowrap bg-white text-sm">
        <tr>
          <td class="p-4">
            <div class="flex items-center gap-4 w-max">
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="" />
              <p>John Doe</p>
            </div>
          </td>
          <td class="p-4">9192939494</td>
          <td class="p-4">NA-1362</td>
          <td class="p-4">Sengodampalayam</td>
          <td class="p-4">Tele Calling 1</td>
          <td class="p-4">Regular Shift</td>
          <td class="p-4">Permanant</td>
          <td class="p-4">Senior Telecaller</td>
          <td class="p-4">28-07-2023</td>
          <td class="p-4">-</td>
          <td class="p-4">Branch Manager</td>
          <td class="p-4">XYZ India Private Limited</td>
        </tr>

        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
</div>

Answered By - Wongjn