Can we solve the table row background image problem, in chrome, in multi celled tables?

Question

It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell

Answer 1

Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/

Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.

Answer 2

Add float:left to the row, that should fix it.

tr {float:left;}

Answer 3

Tested in Chrome 54 on Windows 10:

tr {
  background-attachment: fixed;
}

Though it seems it's not without bugs - the background image only repeats throughout the viewport at loadtime, which means that the cells that appear when you scroll down doesn't have the background.