I am having trouble with what should be a pretty simple task. I need to create a table using Tailwind CSS classes. I have been able to do most of the job with the following code:

<table class="min-w-full text-left text-sm text-black">
  <thead class="bg-gray-200 text-center text-xs uppercase">
    <tr>
      <th scope="col" data-column="0" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Name</th>
      <th scope="col" data-column="1" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Contact</th>
      <th scope="col" data-column="2" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Email</th>
      <th scope="col" data-column="3" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Phone</th>
      <th scope="col" data-column="4" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Category</th>
      <th scope="col" data-column="5" class="w-[14.2857%] cursor-pointer border-r border-gray-400 px-6 py-3">Product</th>
      <th scope="col" data-column="6" class="w-[14.2857%] cursor-pointer px-6 py-3">Position</th>
    </tr>
  </thead>
  <tbody class="break-words">
    <tr class="break-words border-b text-center odd:bg-white even:bg-gray-100 hover:bg-gray-200">
      <td class="w-[14.2857%] break-words px-6 py-4">Verylongcompanynameforsamplepurposes</td>
      <td class="w-[14.2857%] px-6 py-4">First name / Last name</td>
      <td class="w-[14.2857%] break-words px-6 py-4">[email protected]</td>
      <td class="w-[14.2857%] px-6 py-4">123-456-7890</td>
      <td class="w-[14.2857%] px-6 py-4">Category 1</td>
      <td class="w-[14.2857%] px-6 py-4">Product 1</td>
      <td class="w-[14.2857%] px-6 py-4">Position 1</td>
    </tr>
  </tbody>
</table>

I expect the table columns to all have the same width. Since I have 7 columns, I used the arbitrary width value w-[14.2857%]. This works when the table is empty. However, if I add some long data (like columns name and email in my sample code) my columns resize instead of keeping its size and breaking words.

I have tried to add the class break-words at multiple levels: <td>, <tr> and <tbody> but nothing seems to work. If I try to use the class break-all the code works but now Tailwind CSS breaks words even when it is not necessary. The class break-words would be perfect for this case but it does not work.

I appreciate any guidance pointing out what I am missing. You can interact with the code here: Tailwind CSS Play.