带有背景颜色的表头的 CSS 圆角答案

【问题标题】：CSS Rounded corners for table header with background-color带有背景颜色的表头的 CSS 圆角
【发布时间】：2023-03-19 16:55:01
【问题描述】：

我正在尝试为标题行创建一个顶部圆角和不同背景颜色的表格。多亏了在线资源，我成功地单独制作了两者（html/css 中的超级初学者），但是当同时拥有两者时我失败了。

我的意思是（你可以在下面的小提琴中看到它），我可以很好地圆角并为我的桌子设计我想要的设计，除了标题背景颜色仍然是一个完美的矩形，因此是溢出到圆角之外。

我尝试在不同的地方添加border-radius 属性，但没有一个按我的预期工作。我怎样才能使角落变得圆润并让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/

感谢您的帮助

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是因为 th 标签在 table 标签的上方，并且它没有任何边框半径

将边界半径添加到th

【讨论】：