使用CSS为带背景颜色的表头创建圆角。

Question

我想创建一个具有圆角顶端和不同背景颜色的表格。在HTML/CSS方面我是入门级别的，但通过在线资源，我成功地分别实现了这两个功能。但当需要同时实现这两个效果时，我就遇到了问题。

我的意思是（您可以在下面的fiddle链接中看到），我可以很好地实现圆角效果并获得我想要的设计，但表头的背景颜色仍然是矩形的，因此溢出到圆角外部。

我尝试在多个位置添加border-radius属性，但都没有按照我想要的方式工作。如何使角落圆润，并且表头背景颜色能够很好地适应其中？

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/

感谢帮助

- Plopp

Answer 1

在th标签中添加border-radius。

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;
    border-radius: 15px 15px 0px 0px;
}

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>

- Nethra

Answer 2

在代码中添加border-radius属性

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/

- user3401335

Answer 3

这是因为th标签在table标签之上，并且没有任何border-radius属性。

将border-radius属性添加到th标签中。

- user10196907