如何用Tailwind为表格行添加圆角？行圆角设置无效求助

表格行设置圆角无效，核心原因是表格默认的border-collapse: collapse属性会让<tr>的border-radius失效，再加上你用空<tr>实现行间距的方式，也会干扰样式的正常渲染。下面给你两种可行的解决方法：

方法一：改用块级行实现（推荐） #

放弃空<tr>的间距方案，把表格行改成块级元素，直接用margin控制行间距，同时让圆角直接生效：

<table class="text-gray-500 rtl w-full text-center font-inter text-base font-semibold border-separate border-spacing-0">
  <thead class="bg-white text-base text-primary">
    <tr class="rounded-lg block">
      <td scope="col" class="px-4 py-6">الرقم</td>
      <td scope="col" class="px-4 py-6">اسم المشروع</td>
      <td scope="col" class="px-4 py-6">الحالة</td>
      <td scope="col" class="px-4 py-6">الدرجة</td>
      <td scope="col" class="px-4 py-6">التاريخ</td>
      <td scope="col" class="px-4 py-6">التعديل</td>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行示例 -->
    <tr class="bg-white rounded-lg my-3 block">
      <td class="px-4 py-6">1</td>
      <td class="px-4 py-6">مشروع 1</td>
      <td class="px-4 py-6">مكتمل</td>
      <td class="px-4 py-6">90</td>
      <td class="px-4 py-6">2024-05-20</td>
      <td class="px-4 py-6">تعديل</td>
    </tr>
    <tr class="bg-white rounded-lg my-3 block">
      <td class="px-4 py-6">2</td>
      <td class="px-4 py-6">مشروع 2</td>
      <td class="px-4 py-6">قيد التنفيذ</td>
      <td class="px-4 py-6">75</td>
      <td class="px-4 py-6">2024-05-21</td>
      <td class="px-4 py-6">تعديل</td>
    </tr>
  </tbody>
</table>

关键改动：

• 给表格加border-separate类（对应border-collapse: separate），解除边框合并
• 给<tr>加block类，让它能识别margin，用my-3控制上下间距
• 直接给<tr>加rounded-lg，圆角就能正常显示

方法二：保留空行间距，给单元格设圆角 #

如果想继续用空<tr>做间距，需要给每行的首尾单元格单独设置圆角：

<table class="text-gray-500 rtl w-full text-center font-inter text-base font-semibold border-separate border-spacing-0">
  <thead class="bg-white text-base text-primary">
    <tr>
      <td scope="col" class="px-4 py-6 rounded-l-lg">الرقم</td>
      <td scope="col" class="px-4 py-6">اسم المشروع</td>
      <td scope="col" class="px-4 py-6">الحالة</td>
      <td scope="col" class="px-4 py-6">الدرجة</td>
      <td scope="col" class="px-4 py-6">التاريخ</td>
      <td scope="col" class="px-4 py-6 rounded-r-lg">التعديل</td>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-white">
      <td class="px-4 py-6 rounded-l-lg">1</td>
      <td class="px-4 py-6">مشروع 1</td>
      <td class="px-4 py-6">مكتمل</td>
      <td class="px-4 py-6">90</td>
      <td class="px-4 py-6">2024-05-20</td>
      <td class="px-4 py-6 rounded-r-lg">تعديل</td>
    </tr>
    <!-- 保留空行做间距 -->
    <tr class="spacer"></tr>
    <tr class="bg-white">
      <td class="px-4 py-6 rounded-l-lg">2</td>
      <td class="px-4 py-6">مشروع 2</td>
      <td class="px-4 py-6">قيد التنفيذ</td>
      <td class="px-4 py-6">75</td>
      <td class="px-4 py-6">2024-05-21</td>
      <td class="px-4 py-6 rounded-r-lg">تعديل</td>
    </tr>
  </tbody>
</table>

关键改动：

• 同样给表格加border-separate
• 给每行第一个单元格加rounded-l-lg（左圆角），最后一个加rounded-r-lg（右圆角）
• 空<tr>的.spacer样式可以保留，不影响圆角效果

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