html - Background Image on <tr>

Question

I have a table that has 13 columns and an unknown number of rows, could be 1, could be 50+. The table is also wrapped in a scroll wrapper so that only 4 rows are visible at a time. Some of the rows need to have a background image of text "EXPIRED" that spans the entire row.

I have tried many different ways to try and solve this and have yet to find a solution that works.

W3C says you cannot place a background image on a <TR> tag. That needs to change.

One solution I tried was placing a <div> inside the first <td> and using CSS to absolutely position it:

<table style="empty-cells:show" class="wiTable">
<tr><td><div class="expired"></div></td>
</table>

.expired {
    background:url("/images/Expired.png") no-repeat left top;
    position: absolute;
    left: 0;
    width: 900px;
    height: 26px;
    z-index: 0;
}

This worked up to a point. The problem is it also placed the image on the rows that were hidden by the scroll wrapper and the images did not scroll with the table.

I thought I could also break the image up into segments and place them in the individual cells, but that won't work because I need it on several tables and the cells are not a fixed width across the tables.

Oh, This needs to work in IE8 as that is the environment I am working with.

Here is an example of the absolute positioning result:

Answer 1

Using pseudo classes, you can do some trickery using the first-child TD instead of the TR. This also assumes your table has a fixed width and each row has a fixed height. This won't work with a fluid width, although, you could enter adjusted widths for certain media breakpoints if you wanted.

JS Fiddle Demo

Condensed HTML Markup

<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>
    </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;
}