Table with Smaller Elements 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. WikipediaWikipedia
Dancing Dance is a performing art form consisting of purposefully selected sequences of human movement. WikipediaWikipedia
Gardening Gardening is the practice of growing and cultivating plants as part of horticulture. WikipediaWikipedia

Code

<table>
  <caption>My Hobbies</caption>
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Description
      </th>
      <th>
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        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"><span class="hidden-narrow">Wikipedia</span><img alt="Wikipedia" class="hidden-wide" src="http://downloadicons.net/sites/default/files/wiki-logo-icon-19241.png" /></a>
      </td>
    </tr>
    <tr>
      <th>
        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"><span class="hidden-narrow">Wikipedia</span><img alt="Wikipedia" class="hidden-wide" src="http://downloadicons.net/sites/default/files/wiki-logo-icon-19241.png" /></a>
      </td>
    </tr>
    <tr>
      <th>
        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"><span class="hidden-narrow">Wikipedia</span><img alt="Wikipedia" class="hidden-wide" src="http://downloadicons.net/sites/default/files/wiki-logo-icon-19241.png" /></a>
      </td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
}

thead th {
  background-color: lightpink;
}

tbody th {
  background-color: lightgreen;
}

th, td {
  border: 1px solid;
}

img {
  width: 32px;
  height: 32px;
}

@media only screen and (max-width: 600px) {
  .hidden-narrow {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  .hidden-wide {
    display: none;
  }
}
NIL