<table>
<tbody>
<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
<th>Column 3 Header</th>
<th>Column 4 Header</th>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
<tr>
<td>Column 1 Cell</td>
<td>Column 2 Cell</td>
<td>Column 3 Cell</td>
<td>Column 4 Cell</td>
</tr>
</tbody>
</table>
<table class="playlist">
</table>
.playlist tr > :first-of-type,
.playlist tr > :first-of-type {
flex: 1;
}
table tr > :nth-child(n+2) {
flex: 3;
}
.playlist tr > :nth-child(2) {
flex: 4;
}
tr:nth-child(even) {
background-color: rgba(255,211,140,.1);
}
tr:nth-child(odd) td {
font-weight: 600;
}
.playlist tbody td:first-of-type:before {
content: "\2606";
color: rgba(255,255,255,.2);
}
.playlist td:first-of-type.fav-song:before {
content: "\2605";
color: #fe9c00;
}
.playing {
background-image: url(../images/eq.gif);
}
.dancing {
background-image: url(../images/banana.gif);
background-size: auto 100%;
}
.playing, .dancing {
background-repeat: no-repeat;
background-position: left center;
}
.playlist tbody td.dancing:before,
.playlist tbody td.playing:before {
content: none;
}