When the browser shrinks horizontally, the table cells fit their content as desired. However, when the browser expands horizontally, the table cells expands too. How to prevent this with Tailwind CSS? In other words, how to make the table cells fit their content regardless of the browser’s width?

<div class="overflow-x-auto">
  <div class="relative w-full overflow-auto">
    <table class="caption-bottom text-sm w-full">
      <thead class="bg-subtle [&_tr]:border-b">
        <tr class="hover:bg-muted/10 data-[state=selected]:bg-muted border-b transition-colors">
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Name</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Alternative name</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Mobile phone</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Email</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Country</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-pointer false">
            <div class="flex items-center"><span>Address</span></div>
          </th>
          <th class="h-12 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 cursor-default">
            <div class="flex items-center"><span></span></div>
          </th>
        </tr>
      </thead>
      <tbody class="[&_tr:last-child]:border-0">
        <tr class="hover:bg-muted/10 data-[state=selected]:bg-muted border-b transition-colors group cursor-pointer">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="flex w-full items-center gap-2 justify-start">
                <div class="relative flex shrink-0 h-8 w-8">
                  <div class="flex w-full items-center justify-center overflow-hidden rounded-full border"><img src="https://placehold.co/32?text=G&font=Raleway"></div>
                  <div class="absolute bottom-0 right-0 rounded-full border-2 border-white h-2 w-2 bg-muted"></div>
                </div>Graiden Abbott1
              </div>
            </div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Benedict Blankenship</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">+1 (699) 124-4483</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap"><a href="mailto:[email protected]">[email protected]</a></div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Albania</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Excepteur voluptates</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="opacity-0 transition-all group-hover:opacity-100"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-foreground underline-offset-4 hover:opacity-90" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 text-muted">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                  </svg></button></div>
            </div>
          </td>
        </tr>
        <tr class="hover:bg-muted/10 data-[state=selected]:bg-muted border-b transition-colors group cursor-pointer">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="flex w-full items-center gap-2 justify-start">
                <div class="relative flex shrink-0 h-8 w-8">
                  <div class="flex w-full items-center justify-center overflow-hidden rounded-full border"><img src="https://placehold.co/32?text=B&font=Raleway"></div>
                  <div class="absolute bottom-0 right-0 rounded-full border-2 border-white h-2 w-2 bg-muted"></div>
                </div>Brynne Wall
              </div>
            </div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Rebekah Manning</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">+1 (468) 738-9949</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap"><a href="mailto:[email protected]">[email protected]</a></div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Andorra</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Quam expedita laudan</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="opacity-0 transition-all group-hover:opacity-100"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-foreground underline-offset-4 hover:opacity-90" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 text-muted">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                  </svg></button></div>
            </div>
          </td>
        </tr>
        <tr class="hover:bg-muted/10 data-[state=selected]:bg-muted border-b transition-colors group cursor-pointer">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="flex w-full items-center gap-2 justify-start">
                <div class="relative flex shrink-0 h-8 w-8">
                  <div class="flex w-full items-center justify-center overflow-hidden rounded-full border"><img src="https://placehold.co/32?text=S&font=Raleway"></div>
                  <div class="absolute bottom-0 right-0 rounded-full border-2 border-white h-2 w-2 bg-muted"></div>
                </div>Stone Guthrie
              </div>
            </div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Hayfa Justice</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">+1 (443) 847-4221</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap"><a href="mailto:[email protected]">[email protected]</a></div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Algeria</div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">Maxime qui rerum eu </div>
          </td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0">
            <div class="inline-block whitespace-nowrap">
              <div class="opacity-0 transition-all group-hover:opacity-100"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-foreground underline-offset-4 hover:opacity-90" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 text-muted">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                  </svg></button></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Live code at Tailwind Playground