使用背景颜色和边框半径设置 table 行的样式

Question

我有一个有 2 列的 table 行，我想用 border-radius 设置背景色。

<table>
  <tfoot>
    <tr>
      <td class="d-inline-block ltr font-14 font-weight-bold"> Price:</td>
      <td class="text-right text-primary"> 1600$ </td>
    </tr>
  </tfoot>
</table>

只为 tds 提供背景颜色，中间部分未着色，不会遇到此问题。

Answer 1

tr td:first-child { 
  border-top-left-radius: 150px; 
  border-bottom-left-radius: 150px; 
}
  
tr td:last-child { 
  border-top-right-radius: 150px; 
  border-bottom-right-radius: 150px; 
}

td {
  padding: 12px;
  background-color: yellow;
  border: solid 0px #000;
}

table {
  border-collapse: collapse;
}

<table>
  <tfoot>
    <tr>
      <td class="d-inline-block ltr font-14 font-weight-bold"> Price:    </td>
      <td class="text-right text-primary"> 1600$ </td>
    </tr>
  </tfoot>
</table>

使用背景颜色和边框半径设置 table 行的样式

Style a table row with background color and border radius

html

css

sass