In tailwind.css hat .rounded-lg keine Auswirkung auf Tabellen.

Question

Derzeit verwende ich die Tailwind-Version 3.3.3.

Ich kann den Effekt abgerundeter Ecken für die Tabelle nicht erzielen. Ich habe versucht, einen Wrapper-Container mit dem Klassennamen „overflow-hiddenrounded-lg“ hinzuzufügen. Dies löst das Problem der abgerundeten Ecken, aber auch die Ränder auf jeder Seite verschwinden. Wie kann ich dieses Problem lösen?

Mein Code ist:

<table class="w-50 m-auto font-inter text-left border-collapserounded-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">Anzahl Abonnement</span></th>
          </tr>
     </thead>
     <Körper>
          <tr>
               <td class="border border-gray-200 p-3">Silberplan USD monatlich</td>
               <td class="border border-gray-200 p-3">2</td>
          </tr>
     </tbody>
</table>

Answer 1

为了解决这个问题，您可以在表格周围添加一个额外的包装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，您应该可以保持圆角的同时保留角边框。