如何为表格tbody设置仅环绕tbody的圆角边框？

问题原因 #

表格启用border-collapse时，边框合并机制会导致tbody的border-radius失效；同时tbody作为表格行组元素，默认布局下无法直接通过自身属性实现圆角效果。

修改后的代码 #

<table className="w-full border-separate border-spacing-0 text-left">
  <thead>
    <tr>
      <th>Display</th>
      <th>Identifier</th>
      <th>Invested</th>
      <th>Development</th>
      <th>Value</th>
      <th className="w-10"></th>
    </tr>
  </thead>
  <tbody className="border border-solid rounded overflow-hidden">
    <tr>
      <td className="rounded-tl">
        <ToggleChecked />
      </td>
      <td>My Portfolio</td>
      <td>$101.348,98</td>
      <td className="text-[#5FCD8A]">
        +3.02%
        <br />
        $50.600,05
      </td>
      <td>$120,560.34</td>
      <td className="w-10 rounded-tr">MORE</td>
    </tr>
    <!-- 若有更多行，给最后一行的首尾单元格分别添加rounded-bl、rounded-br类 -->
  </tbody>
</table>

关键修改说明 #

• 替换表格布局属性：把border-collapse改成border-separate border-spacing-0，既保留原有的紧凑布局，又允许单元格的边框和圆角独立生效。
• 配置tbody样式：给tbody添加border border-solid rounded overflow-hidden，其中overflow-hidden确保内部单元格的圆角不会超出tbody边框范围。
• 设置单元格圆角：给tbody第一行的首尾单元格分别加rounded-tl（左上圆角）、rounded-tr（右上圆角）；如果有多行，给最后一行的首尾单元格加rounded-bl（左下圆角）、rounded-br（右下圆角），以此实现tbody整体的圆角视觉效果。

内容的提问来源于stack exchange，提问作者Milena Rode-Kotzé