J.me

Background image on table row

Applying a background image on table row is a classic issue that never get right, at least not in a first few pages on Google search when I looked on a solution. In fact, the only cross browser solution is to apply the background to the table cells instead. But what happen if you want a repeated background across the table row?

The problem

Let’s say you wanted to apply a background to a row that has disabled class.

The CSS:

table tr.disabled {
	background: url('disabled.png') repeat-x;
	color: #aaa;
}

Result:

Ouch! The background is in fact applied to the table cell, not the table row as we intended. It looks ugly as the image start in every cell!

The solution

If you need the solution for this issue, rejoice! As long as you know the table width, table row height and you don’t care of old IE7, that is. :)

Here is the new CSS:

table tr.disabled td {
	position: relative;
	color: #aaa;
}
table tr.disabled td:first-child:before {
	background: url(disabled.png) repeat-x;
	content: " ";
	width: 400px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

The result:

Now that’s perfect! Image is now applied to the whole row, even though it’s in fact not applied to the table row, but at least, it is the effect that we need!

The trick is to use :before pseudo-element on the first table cell. Designers has been used this pseudo-elements for a while to generate some cool element, which is in this case, we used it to contain the background. To make sure it appears behind the table cells, we apply position: absolute and z-index: -1. Of course, the top and left is necessary as well. Width is the same as the table width, so this could only apply to the fixed-width table. Finally, the table cell element have a position: relative.

But…

This trick worked on Google Chrome 21 and Opera 12. IE9 works too but you need to specify the height (100% didn’t work unfortunately). Strangely, IE8 works with 100% height, but border is hidden. Mozilla Firefox didn’t work, but in fact, Firefox support the background image on table row, so it doesn’t actually need this trick. The only catch is it behave the same as IE8 (border is hidden).

Final CSS

table tr.disabled td {
	position: relative;
	color: #aaa;
}
table tr.disabled td:first-child:before {
	background: url(disabled.png) repeat-x;
	content: " ";
	width: 400px;
	height: 40px; /* height needed for IE9 */
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
/* Firefox specific CSS, credit: http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css */
@-moz-document url-prefix() {
	table tr.disabled td:first-child:before {
		display: none;
	}
	table tr.disabled {
		background: url(disabled.png) repeat-x;
	}
}

Demo

Unfortunately, border is still hidden on IE8 and Firefox. So it only works if your table didn’t need border.

Do you have a solution that work for you? Let me know in comment! :)

Tags:

3 comments | Leave a comment

  1. J-P June 29, 2013 01:32

    FINALLY a working solution! Thank you good sir! Very good.

  2. lolmaus October 25, 2013 06:53

    You’re awesome. Thank you.

    Unfortunately, the solution won’t work if the width of the table is dynamic and the background is non-repeated.

    • Jeffri Hong October 25, 2013 07:38

      Yeah, dynamic width is no-go, but non-repeated background should work just fine. In fact, I faced this problem when I need to have one big background that cover the whole table row. :)

Leave a comment