在tailwind.css中，.rounded-lg对表格无效。
P粉447495069
2023-07-24 20:47:03
<p>目前，我正在使用的是tailwind版本3.3.3。</p><p>我无法为表格获得圆角效果。我尝试添加一个具有类名"overflow-hidden rounded-lg"的包装容器。这样可以解决圆角问题，但是每个边的边框也消失了。我该如何解决这个问题？</p><p>我的代码是：</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><table class="w-50 m-auto font-inter text-left border-collapse rounded-lg">
<thead>
<tr class="bg-[#f2f4f7]">
<th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200"><span class="inline-flex gap-1">Plan</span></th>
<th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200"><span class="inline-flex gap-1">No. of Subscription</span></th>
</tr>
</thead>
<body>
<tr>
<td class="border border-gray-200 p-3">Silver plan USD Monthly</td>
<td class="border border-gray-200 p-3">2</td>
</tr>
</tbody>
</table></pre>
<p><br /></p>
为了解决这个问题，您可以在表格周围添加一个额外的包装div，并将overflow-hidden rounded-lg类应用于该包装div，而不是表格本身
<div class="w-50 m-auto"> <div class="overflow-hidden rounded-lg"> <table class="w-full font-inter text-left border-collapse"> <thead> <tr class="bg-[#f2f4f7]"> <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200"><span class="inline-flex gap-1">Plan</span></th> <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200"><span class="inline-flex gap-1">No. of Subscription</span></th> </tr> </thead> <tbody> <tr> <td class="border border-gray-200 p-3">Silver plan USD Monthly</td> <td class="border border-gray-200 p-3">2</td> </tr> </tbody> </table> </div> </div>``` 通过将表格包裹在一个div中，并将overflow-hidden rounded-lg类应用于该div，您应该可以保持圆角的同时保留角边框。