Tailwind CSS 类“break-words”不适用于表格行

Question

我在完成一项本应非常简单的任务时遇到了麻烦。我需要使用 Tailwind CSS 类创建一个表。我已经能够使用以下代码完成大部分工作：

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

我希望表格列都具有相同的宽度。由于我有 7 列，因此我使用了任意宽度值

w-[14.2857%]

。当表为空时，此方法有效。但是，如果我添加一些长数据（例如示例代码中的列

name

和

email

），我的列会调整大小，而不是保持其大小并破坏单词。

我尝试在多个级别添加

break-words

类：

<td>

、

<tr>

和

<tbody>

但似乎没有任何效果。如果我尝试使用

break-all

类，代码可以工作，但现在 Tailwind CSS 会破坏单词，即使没有必要也是如此。类

break-words

对于这种情况来说是完美的，但它不起作用。

我很感谢任何指出我所缺少的内容的指导。您可以在此处与代码进行交互：Tailwind CSS Play。

Answer 1

这是您的工作解决方案，希望您会喜欢它

<thead class="bg-gray-200 text-center text-xs uppercase">
  <tr>
    <th scope="col" data-column="0" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Name</th>
    <th scope="col" data-column="1" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Contact</th>
    <th scope="col" data-column="2" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Email</th>
    <th scope="col" data-column="3" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Phone</th>
    <th scope="col" data-column="4" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Category</th>
    <th scope="col" data-column="5" class="w-auto cursor-pointer border-r border-gray-400 px-6 py-3">Product</th>
    <th scope="col" data-column="6" class="w-auto 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=" line-clamp-1 break-all mx-6 my-4">Verylongcompanynameforsamplepurposes</td>
    <td class=" mx-6 my-4">First name / Last name</td>
    <td class=" line-clamp-1 break-all mx-6 my-4">[email protected]</td>
    <td class=" mx-6 my-4">123-456-7890</td>
    <td class=" mx-6 my-4">Category 1</td>
    <td class=" mx-6 my-4">Product 1</td>
    <td class=" mx-6 my-4">Position 1</td>
  </tr>
</tbody>
</table>```