html - 具有背景颜色的表头的 CSS 圆 Angular

Question

我正在尝试创建一个带有圆顶 Angular 和标题行不同背景颜色的表格。多亏了在线资源，我成功地分别制作了两者(html/css 的 super 初学者)，但是当涉及到同时拥有两者时我失败了。

我的意思是(你可以在下面的 fiddle 中看到)，我可以很好地圆 Angular 并为我的表格设计我想要的，除了标题背景颜色仍然是一个完美的矩形，因此是溢出到圆 Angular 之外。

我尝试在不同的地方添加 border-radius 属性，但没有一个按我预期的方式工作。我怎样才能使边 Angular 变圆并使 thead 背景颜色很好地融入其中？

table.std {
  margin-top: 0.2cm;
  width: 100%;
  border: 0.03cm solid #8a8a8a;
  border-spacing: 0;
  border-radius: 15px 15px 0px 0px;
  font-size: 10pt;
}

table.std thead {
  text-align: left;
  background-color: lightgray;
  height: 25px;
}

table.std thead tr th:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  border-bottom: 0.03cm solid #8a8a8a;
}

table.std tbody tr td:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  width: 30%;
}

table.std tbody tr td {
  border-bottom: 0.01cm dashed lightgray;
  height: 20px;
}

<div>
  <table class="std">
    <thead>
      <tr>
        <th colspan=2>Test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ID</td>
        <td>id1</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>2019/12/19</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
      </tr>
      <tr>
        <td>lorem</td>
        <td>ipsum</td>
      </tr>
      <tr>
        <td>john</td>
        <td>doe</td>
      </tr>
    </tbody>
  </table>
</div>

https://jsfiddle.net/co7xb42n/

感谢帮助

Answer 1

将边界半径添加到th

table.std thead tr th:first-child {
    padding-left: 0.25cm; /* To align with section title */
    border-bottom: 0.03cm solid #8a8a8a;
    border-radius: 15px 15px 0px 0px;
}

https://jsfiddle.net/53eshg64/