I am trying to round the table header thead th on the far left and far right. I have them rounded but the underlying tr is poking its background color through leaving me with two th's with a rounded corner but with a sharp edge poking through from the thead tr.
I've tried playing around in the Firefox inspect element to apply CSS in real time but I cannot get the sharp edges to go away.
table thead tr {
background-color: #005073;
}
table thead tr th {
width: 200px;
text-align: center;
}
table {
margin-right: auto;
margin-left: auto;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table tbody tr:hover {
background-color: black;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #1ebbd7;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
<div class="contentTable">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Zip-Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>212 Lift St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>2</td>
<td>Todd</td>
<td>331 Geromino St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>3</td>
<td>Jim</td>
<td>1222 Jumbo Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>4</td>
<td>Susan</td>
<td>888 Bambi Way</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>112 Falcon Dr.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>6</td>
<td>Abby</td>
<td>6219 Pumpkin Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
</tbody>
</table>
</div>
Change
table thead tr {
background-color: #005073;
}
to
table thead th {
background-color: #005073;
}