Question

如何更改thead和tr元素的半径？我希望我的桌子有圆角，但是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和最后一个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>

<table>

Answer 2

您需要在CSS中添加“ th”。然后，您必须使用“边界半径”。

thead th{
border-radius: 10px 10px 10px 10px;
text-align:left;
background:blue;
}

也在td中添加“边界半径”。

td{
border-radius: 10px 10px 10px ;
background-color: red;
}

Answer 3

半径需要在th或td中，所以我会做这样的事情：

table{
    width:100%;
    border-radius:5px;
    background:gray;
    border-collapse: separate;
}

table th {

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align:left;
    background:blue;
}

table td{
    border-radius:5px;
}
th,td{
    padding:5px;   
}

td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

<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>

无法更改<thead>，<tr>元素的边框半径

3 个答案: