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!