Search code examples
htmlcssborderradius

How can I round the thead th corners for a rounded table header?


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>


Solution

  • Change

     table thead tr {
         background-color: #005073;
     }
    

    to

     table thead th {
         background-color: #005073;
     }