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;
}