我怎样才能使圆角 table header 变圆？

Question

我正在尝试将最左边和最右边的 table header thead th 舍入。我把它们弄圆了，但底层的 tr 正在戳它的背景颜色，给我留下两个带圆角但锐边从 thead tr 戳穿的边缘。

我试过在 Firefox 检查元素中实时应用 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

您可以通过将 border-radius: 6px 6px 0px 0px; 应用到整个 table 并赋予它 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>

Answer 2

改变

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

至

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

我怎样才能使圆角 table header 变圆？

How can I round the thead th corners for a rounded table header?

html

css

border

radius