搜尋

首頁  >  問答  >  主體

在tailwind.css中，.rounded-lg對錶格無效。

<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>
P粉447495069P粉447495069572 天前711

全部回覆(1)我來回復

  • P粉478445671

    P粉4784456712023-07-25 14:53:20

    為了解決這個問題，您可以在表格周圍添加一個額外的包裝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，您应该可以保持圆角的同时保留角边框。

    回覆
    0
  • 取消回覆