html - 跨多个 <th> 元素的奇异水平渐变

Question

尝试创建一个带有圆 Angular 和跨越多个元素的单一水平渐变的表格。到目前为止，如果我对包含表格标题的行播放渐变，我会失去圆 Angular 。如果我将它应用于每个表头元素，它不会跨越所有元素，就好像它们是我正在寻找的元素一样。

<table id="roundTable" width="100%" cellspacing="0" cellpadding="3">
  <tbody>
    <tr id="headerRow">
      <th id="topLeft">HEADER</th>
      <th>HEADER</th>
      <th id="topRight">SALE PRICE</th>
    </tr>
  </tbody>
  <tbody id="tbody0">
    <tr>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
    </tr>
    <tr>
      <td>
        test
      </td>
      <td>
        test
      </td>
    </tr>
    <tr>
      <td>
        test
      </td>
      <td>
        test
      </td>
      <td>
        test
      </td>
    </tr>
  </tbody>
</table>

CSS:

th {
  font-family: americane, sans-serif;
  font-style: normal;
  color: black;
  font-weight: 900;
  height: 50px;
  text-transform: uppercase;
  background: linear-gradient(to left, #fe2646 0%, #921621 100%);

}

#topRight{
  border-top-right-radius: 25px; 
}

#topLeft{
  border-top-left-radius: 25px; 
}

#roundTable{
  border-radius: 25px;
  background: red;
}

Answer 1

我将渐变添加到该行，然后使用您的选择器将边框半径设置为左上角和右上角。

#headerRow {
  background: linear-gradient(to left, #fe2646 0%, #921621 100%);
}

#headerRow #topLeft {
  border-top-left-radius: 25px; 
}

#headerRow #topRight {
  border-top-right-radius: 25px; 
}

th {
  font-family: americane, sans-serif;
  font-style: normal;
  color: black;
  font-weight: 900;
  height: 50px;
  text-transform: uppercase;
}

#roundTable{
  border-radius: 25px;
  background: red;
}