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

Question

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

\n

我是：

\n

\n
• 使表格成为：“w-full”
\n
• 使 td 和 pa 成为“突破所有”
\n
• 给 tr 一个最大宽度
\n

\n

这是代码：

\n

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

\n

看起来是这样的：\n

\n

Answer 1

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

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