Dalam tailwind.css, .rounded-lg tidak mempunyai kesan pada jadual.

Question

Pada masa ini, saya menggunakan tailwind versi 3.3.3.

Saya tidak boleh mendapatkan kesan bucu bulat untuk meja. Saya cuba menambah bekas pembalut dengan nama kelas "overflow-hidden rounded-lg". Ini menyelesaikan masalah sudut bulat, tetapi sempadan pada setiap sisi juga hilang. Bagaimanakah saya boleh menyelesaikan masalah ini?

Kod saya ialah:

<table class="w-50 m-auto font-inter text-left border-runtuh bulat-lg">
    <kepala>
         <tr class="bg-[#f2f4f7]">
              <th class="p-3 text-grey-500 text-xs font-semibold leading-noe border border-grey-200"><span class="inline-flex gap-1">Plan</ span></th>
              <th class="p-3 text-gray-500 text-xs font-semibold leading-noe border-gray-200"><span class="inline-flex gap-1">No Langganan</span></th>
          </tr>
     </kepala>
     <badan>
          <tr>
               <td class="border border-gray-200 p-3">Pelan perak USD Bulanan</td>
               <td class="sempadan-kelabu-200 p-3">2</td>
          </tr>
     </tbody>
</table>

Answer 1

Untuk menyelesaikan masalah ini, anda boleh menambah div pembalut tambahan di sekeliling meja dan gunakan kelas bulat-lg limpahan-tersembunyi pada div pembalut itu, bukan jadual itu sendiri

<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，您应该可以保持圆角的同时保留角边框。