How to make repeating-linear-gradient for a table continue seamlessly over multiple cells?

Question

I'm having trouble with repeating-linear-gradient with tables. Basically, I can't make it look nice with tables, especially on Chrome. Even though I apply said rule to a tr element, it looks like td elements inherit it and instead of having a continuous stripes, I get 'jagged' ones (=stripes do not continue over cell borders).

.striped {
  background: repeating-linear-gradient(
    45deg,
    #FFFFFF,
    #FFFFFF 10px,
    #DDDDDD 10px,
    #DDDDDD 20px
)}

Here's a Codepen illustrating the issue:

http://codepen.io/merryprankster/pen/bpeCc

With Chrome, it looks really awful. With Firefox, almost good but not exactly (sometimes the stripes are of different width - off by one pixel - across cell boundaries).

EDIT: to clarify, I need to target a specific row, not whole table. So yes, the point about styling a tr is actually relevant.

Answer 1

This is a confirmed bug in Chrome. Given that it was first reported in 2010 (when Gecko actually had the same bug) and is currently marked WONTFIX I wouldn't hold my breath for a real fix. You could open a new bug, it might be 'doable' now.

As a workaround: put the stripes on the table so as not to confuse the rendering mechanisms, then instead of styling the rows 'to be striped', unstyle the other rows, like this:

table.striped {
  background: repeating-linear-gradient(
        45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #DDDDDD 10px,
        #DDDDDD 20px
  );
}
tr:not(.striped) {
  background:white; /* or any color that would normally be behind the table */
}

This way it still works as if you're highlighting only the indicated row as you intend. If for some reason there is a non-opaque background behind the unstyled rows you're probably flat out of luck because of this bug.

Updated codepen. Works identically in IE, FF and Chrome without 'hickups'.