Question

我试图在最左边和最右边四舍五入表格标题thead。我将它们弄圆了，但是底层的tr却使背景色变暗了，剩下两个带有圆角的th，但是从thead tr露出了锋利的边缘。

我曾尝试在Firefox inspect元素中玩转以实时应用CSS，但无法消除锋利的边缘。

table thead tr {
  background-color: #005073;
}


table thead tr th {
  width: 200px;
  text-align: center;
}


table {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}


table tbody tr:hover {
  background-color: black;
}


td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #1ebbd7;
}


tr:first-child th:first-child {
  border-top-left-radius: 6px;
}


tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

<div class="contentTable">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>State</th>
        <th>Zip-Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Bob</td>
        <td>212 Lift St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Todd</td>
        <td>331 Geromino St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jim</td>
        <td>1222 Jumbo Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Susan</td>
        <td>888 Bambi Way</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>5</td>
        <td>James</td>
        <td>112 Falcon Dr.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Abby</td>
        <td>6219 Pumpkin Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

更改

 table thead tr {
     background-color: #005073;
 }

到

 table thead th {
     background-color: #005073;
 }

Answer 2

通过将border-radius: 6px 6px 0px 0px;应用于整个表并将其赋予overflow: hidden，可以达到预期的效果。

table thead tr {
  background-color: #005073;
}


table thead tr th {
  width: 200px;
  text-align: center;
}


table {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}


table tbody tr:hover {
  background-color: black;
}


td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #1ebbd7;
}


table {
  border-radius: 6px 6px 0px 0px;
  overflow: hidden;
}

<div class="contentTable">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>State</th>
        <th>Zip-Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Bob</td>
        <td>212 Lift St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Todd</td>
        <td>331 Geromino St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jim</td>
        <td>1222 Jumbo Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Susan</td>
        <td>888 Bambi Way</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>5</td>
        <td>James</td>
        <td>112 Falcon Dr.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Abby</td>
        <td>6219 Pumpkin Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
    </tbody>
  </table>
</div>

如何将thead的角落四舍五入为圆桌头？

2 个答案: