tailwind.css では、.rounded-lg はテーブルに影響を与えません。

Question

現在、tailwind バージョン 3.3.3 を使用しています。

表の角丸効果が得られません。 「overflow-hiddenrounded-lg」というクラス名を持つラッパーコンテナを追加してみました。これにより角丸の問題は解決されますが、各辺の境界線も消えてしまいます。この問題はどうすれば解決できますか?

私のコードは次のとおりです:

<table class="w-50 m-auto font-inter text-left border-collapserounded-lg">
    <頭>
         <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">計画</スパン>
              <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200"><span class="inline-flex gap-1">数サブスクリプション</span></th>
          </tr>
     </頭>
     <本体>
          <tr>
               <td class="border border-gray-200 p-3">シルバー プラン USD 月額</td>
               <td class="border border-gray-200 p-3">2</td>
          </tr>
     </tbody>
</table>

Answer 1

この問題を解決するには、テーブルの周囲に追加の折り返し div を追加し、テーブル自体ではなく、その折り返し div にオーバーフロー非表示のrounded-lg クラスを適用します。 リーリー