Tailwind CSS 3.3.3中表格rounded-lg不生效，边框丢失如何解决？

问题根源 #

• 直接给<table>加rounded-lg不生效：因为border-collapse模式下，表格的圆角样式会被内部单元格的边框覆盖，浏览器不会渲染表格自身的圆角。
• 套overflow-hidden rounded-lg容器后边角边框消失：容器的圆角会裁掉单元格延伸到角落的边框部分，导致边角看不到边框。

两种可行解决方案 #

方案一：改用border-separate + 单元格单独设置圆角

通过切换表格边框模式为分离模式，给边角的单元格单独设置圆角，同时消除默认间距：

<div class="w-50 m-auto">
  <table class="w-full font-inter text-left border-separate border-spacing-0 rounded-lg">
    <thead>
      <tr class="bg-[#f2f4f7]">
        <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200 rounded-tl-lg">Plan</th>
        <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200 rounded-tr-lg">No. of Subscription</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>
      <!-- 若有最后一行，需给对应单元格加底部圆角 -->
      <!-- <tr>
        <td class="border border-gray-200 p-3 rounded-bl-lg">Another Plan</td>
        <td class="border border-gray-200 p-3 rounded-br-lg">5</td>
      </tr> -->
    </tbody>
  </table>
</div>

方案二：保留border-collapse + 容器overflow-hidden + 单元格圆角

保留边框合并模式，给容器加圆角和溢出隐藏，同时给边角单元格单独设置圆角，避免边框被裁掉：

<div class="w-50 m-auto rounded-lg overflow-hidden">
  <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 rounded-tl-lg">Plan</th>
        <th class="p-3 text-gray-500 text-xs font-semibold leading-none border border-gray-200 rounded-tr-lg">No. of Subscription</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>
      <!-- 若有最后一行，需给对应单元格加底部圆角 -->
      <!-- <tr>
        <td class="border border-gray-200 p-3 rounded-bl-lg">Another Plan</td>
        <td class="border border-gray-200 p-3 rounded-br-lg">5</td>
      </tr> -->
    </tbody>
  </table>
</div>

额外修正：代码错误 #

你的原代码中把<tbody>误写为<body>，这会导致表格结构异常，需要修正为<tbody>才能正常渲染。

内容的提问来源于stack exchange，提问作者Minhaz