Dalam tailwind.css, .rounded-lg tidak mempunyai kesan pada jadual.
P粉447495069
P粉447495069 2023-07-24 20:47:03
0
1
708
<p>Pada masa ini, saya menggunakan tailwind versi 3.3.3. </p><p>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? </p><p>Kod saya ialah: </p><p><br /></p> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>
P粉447495069
P粉447495069

membalas semua(1)
P粉478445671

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,您应该可以保持圆角的同时保留角边框。 
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan