带有背景颜色的表格标题的 CSS 圆角

Question

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

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

我尝试在不同的地方添加 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/

谢谢您的帮助

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/

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

Answer 3

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

将边界半径添加到 th