tailwind.css에서 .rounded-lg는 테이블에 영향을 주지 않습니다.

Question

<p>현재 tailwind 버전 3.3.3을 사용하고 있습니다.

테이블에 둥근 모서리 효과를 얻을 수 없습니다. 클래스 이름이 "overflow-hidden rounded-lg"인 래퍼 컨테이너를 추가해 보았습니다. 이렇게 하면 둥근 모서리 문제가 해결되지만 양쪽의 테두리도 사라집니다. 이 문제를 어떻게 해결할 수 있나요?

내 코드는 다음과 같습니다:

<pre class="brush:php;toolbar:false;"><table class="w-50 m-auto 글꼴-inter text-left border-collapse rounded-lg"> <머리> <tr class="bg-[#f2f4f7]"> <th class="p-3 text-gray-500 text-xsfont-semiboldleading-none border border-gray-200"><span class="inline-flex gap-1">계획</ 스팬> <th class="p-3 text-gray-500 text-xsfont-semiboldleading-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></pre> <p><br /></p>

Answer 1

이 문제를 해결하려면 테이블 주위에 추가 래핑 div를 추가하고 테이블 자체가 아닌 해당 래핑 div에 오버플로 숨김 rounded-lg 클래스를 적용하면 됩니다.

으아아아