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

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'.

You can define background-attachment: fixed; to the tr, as you can see on this updated Codepen http://codepen.io/anon/pen/NGaBzP.

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

This solution was presented by Chris Coyier here https://css-tricks.com/stripes-css/Look for the Funky Town part.

The gradient will stay fixed as you scroll the page, but it's better than a 'jagged' style.

Can you move the .striped class to the table instead of the row?

<table class="striped">  <tr >    <td>hi</td>    <td>there</td>    <td>dear css observer</td>  </tr></table>

Codepen: http://codepen.io/anon/pen/bcpsy