<div id="container">
  <h2>Summer Camp Schedule</h2>
  <table>
    <thead>
      <tr>
        <th>Class</th>
        <th>Date</th>
        <th>Time</th>
        <th>Availability</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="class">Swimming</td>
        <td class="date">June 1 - 18th</td>
        <td class="time">10:45AM</td>
        <td class="spots">2 spots left</td>
      </tr>
      <tr>
        <td class="class">Drawing</td>
        <td class="date">June 22 - July 9th</td>
        <td class="time">09:30AM</td>

        <td class="spots">10 spots left</td>
      </tr>
      <tr>
        <td class="class">Dancing</td>
        <td class="date">July 13 - 30th</td>
        <td class="time">14:30PM</td>
        <td class="spots"></td>
      </tr>
      <tr>
        <td class="class">Basketball</td>
        <td class="date">June 22 - July 9th</td>
        <td class="time">10:45AM</td>
        <td class="spots">1 spots left</td>
      </tr>
      <tr>
        <td class="class">Soccer</td>
        <td class="date">June 1 - 18th</td>
        <td class="time">10:45AM</td>
        <td class="spots"></td>
      </tr>
      <tr>
        <td class="class">Skating</td>
        <td class="date">July 13 - 30th</td>
        <td class="time">10:45AM</td>
        <td class="spots">6 spots left</td>
      </tr>
      <tr>
        <td class="class">Tennis</td>
        <td class="date">July 13 - 30th</td>
        <td class="time">10:45AM</td>
        <td class="spots">4 spots left</td>
      </tr>
      <tr>
        <td class="class">Flag Football</td>
        <td class="date">June 22 - July 9th</td>
        <td class="time">10:45AM</td>
        <td class="spots"></td>
      </tr>
    </tbody>
  </table>
</div>

#container {
  margin: 2ch;
}
table {
  text-align: left;
  border-collapse: collapse;
  border: 2px solid #90a4ae;
}

th {
  background: #cfd8dc;
  padding: 1.3ch;
  border: 2px solid #90a4ae;
}

tr {
  &:nth-child(even) {
    background: #eceff1;
  }
}

.spots:not(empty) {
  background: #00e676;
}

td {
  padding: 1ch;
  border: 2px solid #90a4ae;
  &:empty {
    background: #e53935;
    &::before {
      content: "full";
      color: white;
    }
  }
}