CSS Rounded corners for table header with background-color

Question

I'm trying to create a table with rounded top corners and a different background color for the header line. I succeeded in making both individually (super beginner in html/css) thanks to online ressources but I fail when it comes to have the two at the same time.

What I mean is (and you can see it in the fiddle below), I can round the corners just fine and have the design I want for my table except that the header background-color is still a perfect rectangle and thus is overflowing outside the rounded corners.

I tried adding the border-radius property in various places but none worked the way I intended. How can I make the corners rounded and having the thead background-color fitting nicely in it ?

 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/

Thanks for the help

Answer 1

Add the border-radius to 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

add border-radius from th tag.

 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

This is cause the th tag is above of the table tag and it doesn't have any border-radius

Add the border-radius to th