Visually hidden table headers

<table>
  <caption>
    My Hobbies
  </caption>
  <tr class="visually-hidden">
    <th scope="col">
      Name
    </th>
    <th scope="col">
      Description
    </th>
    <th scope="col">
      Additional Resources
    </th>
  </tr>
  <tr>
    <th scope="row">
      Playing Soccer
    </th>
    <td>
      Soccer is a team sport played between two teams of eleven players with a spherical ball.
    </td>
    <td>
      <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
    </td>
  </tr>
  <tr>
    <th scope="row">
      Dancing
    </th>
    <td>
      Dance is a performing art form consisting of purposefully selected sequences of human movement.
    </td>
    <td>
      <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
    </td>
  </tr>
  <tr>
    <th scope="row">
      Gardening
    </th>
    <td>
      Gardening is the practice of growing and cultivating plants as part of horticulture.
    </td>
    <td>
      <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
    </td>
  </tr>
</table>

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

table {
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-collapse: collapse;
}

th, td {
  border-top: 1px solid;
  border-right: 1px solid;
  padding: 4px 8px;
}

th[scope="row"] {
  background-color: lightgreen;
}
th[scope="col"] {
  background-color: lightpink;
}