Dans tailwind.css, .rounded-lg n'a aucun effet sur les tables.
P粉447495069
P粉447495069 2023-07-24 20:47:03
0
1
483
<p>Actuellement, j'utilise la version 3.3.3 de Tailwind. </p><p>Je n'arrive pas à obtenir l'effet de coins arrondis pour le tableau. J'ai essayé d'ajouter un conteneur wrapper avec le nom de classe "overflow-hidden round-lg". Cela résout le problème des coins arrondis, mais les bordures de chaque côté disparaissent également. Comment puis-je résoudre ce problème? </p><p>Mon code est : </p><p><br /></p> <pre class="brush:php;toolbar:false;"><table class="w-50 m-auto font-inter text-left border-collapse arrondi-lg"> <tête> <tr class="bg-[#f2f4f7]"> <th class="p-3 text-gray-500 text-xs font-semibold leader-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 leader-none border border-gray-200"><span class="inline-flex gap-1">Nombre de Abonnement</span></th> ≪/tr> ≪/tête> <corps> <tr> <td class="border border-gray-200 p-3">Forfait Argent USD Mensuel</td> <td class="border border-gray-200 p-3">2</td> ≪/tr> </tcorps> </table></pré> <p><br /></p>
P粉447495069
P粉447495069

répondre à tous(1)
P粉478445671

Pour résoudre ce problème, vous pouvez ajouter un div d'emballage supplémentaire autour de la table et appliquer la classe round-lg cachée par débordement à ce div d'emballage, pas à la table elle-même

<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,您应该可以保持圆角的同时保留角边框。 
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!