<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;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.