how to put a line under first row in table

Question

I'm trying to put a line under the first row in my table but its not working. I followed the w3 schools guide for tables but it doesnt show how to put lines. I tried to put a border on the th, but it leaves a gap in the line. when I try to put a border on the tr, it doesnt work.

Here is my code:

tr {
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Answer 1

Tables are only meant to be formatted via individual cells. If you try to style a tr tag, you need to make sure you have border-collapse: collapse on your table. To target just the first tr specifically, set your specifier as tr:first-of-type and add a border-bottom: 2px solid black.

table {
  border-collapse: collapse;
}

tr:first-of-type {
  border-bottom: 2px solid black;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>