JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<table>
<tr>
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr>
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr>
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr>
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
<tr class="expired">
<td>Model</td>
<td>Make</td>
<td>Miles</td>
<td>Year</td>
<td>Options</td>
<td>Price</td>
</tr>
</table>
</div>
CSS
.container {
overflow-y: scroll;
height: 115px;
}
table {
color: #fff;
width: 500px;
border-collapse: collapse;
}
table tr.expired {
position: relative;
}
table tr.expired td:first-child:before {
content: "";
position: absolute;
width: 500px;
height: 30px;
z-index: -100;
top: 0;
left: 0;
/*background: red;*/
background: url('http://lorempixel.com/output/nightlife-q-c-640-480-3.jpg');
}
table tr.expired td {
z-index: 100;
position: relative;
background: transparent !important;
}
table tr td {
padding: 5px;
background: #999;
}
table tr:nth-child(odd) td {
background: #ccc;
}