html - 无法更改 <thead>、<tr> 元素的边框半径

Question

如何改变 thead 和 tr 元素的半径？我希望我的 table 有圆 Angular ，但 border-radius 不适用于 thead 和 tr 但它适用于元素本身。这是 CSS。

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
thead {
    border-radius:5px;
    text-align:left;
    background:blue;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}

这是 HTML。

   <table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table> 

Answer 1

这很容易做到。您需要将边框半径添加到行中第一个和最后一个 th 的正确 Angular ，而不是像这样的 thead:

th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px;
}

这是一个完整的代码片段:

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}
th{
text-align:left;
    background:blue;
    color: #fff;
}
th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px;
}

   <table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>