Background Image On

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.

Solution 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

<divclass="container"><table><tr><td>Model</td><td>Make</td><td>Miles</td><td>Year</td><td>Options</td><td>Price</td></tr><trclass="expired"><td>Model</td><td>Make</td><td>Miles</td><td>Year</td><td>Options</td><td>Price</td></tr><trclass="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;
}

tabletr.expired {
    position: relative;
}

tabletr.expiredtd: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');
}

tabletr.expiredtd {
    z-index: 100;
    position: relative;
    background: transparent !important;
}

tabletrtd {
    padding: 5px;
    background: #999;
}

tabletr:nth-child(odd) td {
    background: #ccc;
}

Solution 2:

I came up with a workaround for a fluid table. it involves inserting a 'dummy' row above the actual row, containing a single cell, which contains a div that renders the background image. The div uses a negative bottom-margin set to the height of the background image to overlap with the 'real' row below it. works pixel perfect in my example.

CSS:

tr.gradienttddiv{
    width: 100%;
    height: 28px;    
    margin: 00 -28px0;
    background: #000url(/pics/table_head.png) repeat-y top left;
    color: #FFF;
    background-size: 100%;
    padding:0;
}

HTML:

<table><trclass="gradient"><tdcolspan="2"><div>&nbsp;</div></td></tr><tr><th>Strengths</th><th>Weaknesses</th></tr><tr><td>
            whatever</td><td>
            whatever</td></tr><trclass="gradient"><tdcolspan="2"><div>&nbsp;</div></td></tr><tr><th>Opportunities</th><th>Threats</th></tr><tr><td>
            whatever</td><td>
            whatever</td></tr></table>