I am a beginner in HTML/CSS and I am trying to create a table with rounded top corners and a different background color for the header line. I have been able to achieve each individually with the help of online resources but I am struggling to combine the two successfully.
What I am experiencing is that although I can round the corners of the table, the header background-color remains a perfect rectangle, overflowing outside the rounded corners.
I have tried adding the border-radius property in different places, but none of them worked as I intended. How can I make the corners rounded and have the thead background-color fit nicely within them?
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/
Any help or guidance would be greatly appreciated.