Table with Visually Hidden Headers in a Narrow View

My Hobbies
Name Description Additional Resources
Playing Soccer Soccer is a team sport played between two teams of eleven players with a spherical ball. Wikipedia
Dancing Dance is a performing art form consisting of purposefully selected sequences of human movement. Wikipedia
Gardening Gardening is the practice of growing and cultivating plants as part of horticulture. Wikipedia

Code

<table role="grid">
  <caption>My Hobbies</caption>
  <thead role="presentation">
    <tr role="row">
      <th role="columnheader">
        Name
      </th>
      <th role="columnheader">
        Description
      </th>
      <th role="columnheader">
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody role="presentation">
    <tr role="row">
      <th role="rowheader">
        Playing Soccer
      </th>
      <td role="gridcell">
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td role="gridcell">
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr role="row">
      <th role="rowheader">
        Dancing
      </th>
      <td role="gridcell">
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td role="gridcell">
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr role="row">
      <th role="rowheader">
        Gardening
      </th>
      <td role="gridcell">
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td role="gridcell">
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
}

thead th {
  background-color: lightpink;
}

tbody th {
  background-color: lightgreen;
}

th, td {
  border: 1px solid;
}

@media only screen and (max-width: 600px) {
  table {
    display: block;
    border-bottom: 1px solid;
  }

  caption, tr, tbody {
    display: block;
  }

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

  td, th {
    border-bottom: 0;
    padding: 4px 8px;
    display: block;
  }

  th {
    text-align: left;
  }
}
NIL