tailwind-css - 如何在表格内制作自动包装？

Question

我正在尝试使用 Tailwind CSS 在表格行内制作一个单词包装器，但它似乎不起作用。我做错了什么？

我是:

• 使表格成为:“w-full”
• 使 td 和 p 成为“突破所有”
• 为 tr 指定最大宽度

这是代码:

      <div className="py-5 ">
        <div className="overflow-x-auto">
          <table className="w-full max-w-4xl mx-auto overflow-hidden bg-white divide-y divide-gray-300 rounded-lg whitespace-nowrap">
            <thead className="bg-gray-900">
              <tr className="text-left text-white">
                <th className="px-6 py-4 text-lg font-semibold "> n ° </th>
                <th className="px-3 py-4 text-lg font-semibold "> Song </th>
                <th className="px-3 py-4 text-lg font-semibold text-center "> Best Singers </th>
                <th className="px-6 py-4 text-lg font-semibold text-center">  </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              <tr className="max-w-xs break-words">
                <td className="px-6 py-4">
                  <div className="flex items-center space-x-3">
                    <p>
                      1
                    </p>
                  </div>
                </td>
                <td
                  style={{ maxWidth: '100px' }}
                  className="px-3 py-4 break-all"
                >
                  <p
                    className="break-all"
                  >
                    Vivin la vida loca dsadasdasdasd dasdddddddd saddasdasdad
                  </p>
                </td>
                <td className="px-3 py-4 text-center">
                  <p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
                    Donkey
                  </p>
                </td>
                <td className="px-3 py-4 text-center">
                  <p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
                    Ricky Martin
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

它看起来是这样的:

Answer 1

您只需从表格中删除whitespace-nowrap，然后它就可以工作了。

在此处上传示例:https://stackblitz.com/edit/react-ewzbi6?file=src/App.js