如何为表格及子表格的所有<tr>添加圆角样式？

问题描述 #

我是一名后端开发者，具备基础HTML和CSS知识。编写代码后发现，无法为表格及子表格中的所有<tr>元素添加圆角效果，仅第一个<tr>显示圆角。即便为<tr>设置了border-radius属性，也没有任何变化。

当前效果 #

预期效果 #

原代码 #

CSS #

.table-curved {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0px;
  background-color: #424250;
  color: #FFFFFF;
}

.table-curved {
  border: solid #424250 1px;
  border-radius: 6px;
  border-left: 0px;
}

.table-curved tr {
  position: relative;
  border-radius: 26px;
  border-collapse: seperate;
  border-spacing: 0;
  background-position-x: 10px;
  padding: 10px 0;
  transition: background .1s;
}

.table-curved th {
  border-top: none;
}

.table-curved th:first-child {
  border-radius: 0 6px 0 0;
}

.table-curved th:last-child {
  border-radius: 6px 0 0 0;
}

.table-curved th:only-child {
  border-radius: 6px 6px 0 0;
}

.table-curved tr:last-child td:first-child {
  border-radius: 0 0 6px 0;
}

.table-curved tr:last-child td:last-child {
  border-radius: 0 0 0 6px;
}

.table-curved td:first-child:before {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 6px 0 0 6px;
  position: absolute;
}

.table-curved td.red:before {
  background: red;
}

.table-curved td.green:before {
  background: green;
}

.table-curved td.blue:before {
  background: blue;
}

.table-curved td.orange:before {
  background: orange;
}

.table-curved td:first-child {
  padding-left: 15px;
}

.table-curved td {
  position: relative;
  border-bottom: 10px solid #424250;
  border-spacing: 0px;
  padding: 10px;
  text-align: center;
}

.table-curved .child td {
  position: relative;
  border-bottom: 10px solid #393943;
  border-spacing: 0px;
  padding: 10px;
  text-align: center;
}

body {
  background-color: #424250;
}

.header-tr {
  background-color: #363640;
}

.body-tr {
  background-color: #393943;
}

HTML #

<table class="table-curved">
  <tr class="header-tr">
    <td class="orange" style="width: 8% !important;">
      وضعیت
    </td>
    <td style="width: 8% !important;">
      مهلت انجام
    </td>
    <td style="width: 8% !important;">
      نفر ساعت
    </td>
    <td style="width: 30% !important;">
      گام
    </td>
    <td style="width: 25% !important;">
      عنوان
    </td>
    <td style="width: 19% !important;">
      منشا
    </td>
    <td style="width: 2% !important;">
      ردیف
    </td>
  </tr>
  <tr class="body-tr">
    <td colspan="4" style="padding-left: 0;">
      <table class="table-curved child">
        <tbody>
          <tr>
            <td class="orange" style="width: 15% !important;"> وضعیت</td>
            <td style="width: 15% !important;">مهلت انجام </td>
            <td style="width: 15% !important;"> نفر ساعت </td>
            <td style="width: 55% !important;">گام</td>
          </tr>
          <tr>
            <td class="orange"> وضعیت</td>
            <td>مهلت انجام </td>
            <td> نفر ساعت </td>
            <td>گام</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>
      <h4>کد نویسی نرم افزار باک 21 با زبان ++C برای افزایش سرعت و کارایی برنامه</h4>
      <label>1401/10/15</label>
    </td>
    <td>
      <h4>UB</h4>
      <label>1401/10/15</label>
      <br>
      <button>1</button><button>2</button><button>3</button>
    </td>
    <td>
      #1
    </td>
  </tr>
</table>

解决方案 #

<tr>元素本身不支持border-radius属性，需要为每个<tr>的首尾<td>设置圆角来实现效果。修改后的CSS如下：

.table-curved {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0;
  background-color: #424250;
  color: #FFFFFF;
  border: solid #424250 1px;
  border-radius: 6px;
  border-left: 0;
}

/* 主表格每个tr的圆角设置 */
.table-curved tr:first-child td:first-child {
  border-radius: 6px 0 0 0;
}
.table-curved tr:first-child td:last-child {
  border-radius: 0 6px 0 0;
}
.table-curved tr:last-child td:first-child {
  border-radius: 0 0 6px 0;
}
.table-curved tr:last-child td:last-child {
  border-radius: 0 0 0 6px;
}

/* 子表格每个tr的圆角设置 */
.table-curved .child tr:first-child td:first-child {
  border-radius: 6px 0 0 0;
}
.table-curved .child tr:first-child td:last-child {
  border-radius: 0 6px 0 0;
}
.table-curved .child tr:last-child td:first-child {
  border-radius: 0 0 6px 0;
}
.table-curved .child tr:last-child td:last-child {
  border-radius: 0 0 0 6px;
}

.table-curved tr {
  position: relative;
  transition: background .1s;
}

.table-curved td:first-child:before {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 6px 0 0 6px;
  position: absolute;
}

.table-curved td.red:before {
  background: red;
}
.table-curved td.green:before {
  background: green;
}
.table-curved td.blue:before {
  background: blue;
}
.table-curved td.orange:before {
  background: orange;
}

.table-curved td:first-child {
  padding-left: 15px;
}

.table-curved td {
  position: relative;
  border-bottom: 10px solid #424250;
  padding: 10px;
  text-align: center;
}

.table-curved .child td {
  border-bottom: 10px solid #393943;
}

body {
  background-color: #424250;
}

.header-tr {
  background-color: #363640;
}

.body-tr {
  background-color: #393943;
}

关键修改说明 #

1. 移除了<tr>上无效的border-radius和冗余的border-collapse/border-spacing设置
2. 为主表格和子表格的每个<tr>分别设置首尾单元格的圆角，实现每行的圆角效果
3. 保留了原有左侧彩色标识、间距和背景色样式，确保布局一致

内容的提问来源于stack exchange，提问作者md.119