CSS技巧：在独立边框表格中实现圆角行效果

/* 原始CSS */
table {
  width: 70vw;
  border-collapse: separate; /* 关键属性，允许行间距 */
  border-spacing: 0 15px; /* 行间距 */
}

tr {
  border: 1px solid black;
  border-radius: 15px; /* 此处设置无效 */
}

/* 其他样式 */
tr:nth-child(even) {
  background-color: white;
}

tr:nth-child(odd) {
  background-color: #f1f2f6;
}

th {
  background-color: #2B59FF;
  color: white;
  padding: 10px 40px;
  font-weight: bold;
}

td {
  padding: 25px 15px;
  font-weight: 100;
}

<!-- HTML表格结构 -->
<table>
  <tr>
    <th>Company</th>
    <th>Email</th>
    <th>Progress</th>
    <th>Location</th>
    <th>Payment</th>
  </tr>
  <!-- 更多数据行 -->
  <tr>
    <td>Time Developments</td>
    <td>[email protected]</td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Quad Panelling</td>
    <td>[email protected]</td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>
</table>

/* 修正后的CSS */
body {
  font-family: 'Plus Jakarta Sans', sans-serif, 'Poppins', sans-serif, 'Roboto', sans-serif;
  color: #2E384D;
  background-color: #F5F7FC;
}

table {
  width: 70vw;
  border-collapse: separate; /* 保持行间距的关键 */
  border-spacing: 0 15px; /* 行间距 */
}

tr:nth-child(even) {
  background-color: white;
}

tr:nth-child(odd) {
  background-color: #f1f2f6;
}

tr {
  border: 1px solid black; /* 行的边框，但圆角由单元格负责 */
}

th {
  background-color: #2B59FF;
  color: white;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

td {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  font-weight: 100;
}

/* 关键改动：将圆角应用于每行的第一个和最后一个单元格 */
tr :first-child {
  border-top-left-radius: 15px; /* 左上角 */
  border-bottom-left-radius: 15px; /* 左下角 */
}

tr :last-child {
  border-top-right-radius: 15px; /* 右上角 */
  border-bottom-right-radius: 15px; /* 右下角 */
}

<!-- HTML表格结构保持不变 -->
<table>
  <tr>
    <th>Company</th>
    <th>Email</th>
    <th>Progress</th>
    <th>Location</th>
    <th>Payment</th>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td><a class="__cf_email__" data-cfemail="d6bcbfbb96a2bfbbb3b2b3a0b3bab9a6bbb3b8a2a5f8b5b7" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$200</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td><a class="__cf_email__" data-cfemail="660c09032617130702160708030a0a0f0801480507" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td><a class="__cf_email__" data-cfemail="2c4645416c5845414948495a4940435c414942585f024f4d" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$100</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td><a class="__cf_email__" data-cfemail="73191c16330206121703121d161f1f1a1d145d1012" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>
</table>