How to make a repeating-linear gradient for a table move freely across multiple cells?

Question

I am having problems with repeating linear gradient with tables. Basically, I can't make it beautiful with tables, especially in Chrome. Despite the fact that I apply the indicated rule to the tr element, it looks like sets of td elements, and instead of having continuous stripes, I get “jagged” ones (= stripes do not extend along the borders of the cells).

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

Here Codepen illustrates the problem:

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

With Chrome, it looks very awful. With Firefox, it’s almost not bad, but not really (sometimes stripes of different widths - by one pixel - across cell borders).

EDIT : to clarify, I need to target a specific row, not a whole table. So yes, the tr styling clause really matters.

Answer 1

This is a confirmed bug in Chrome . Given that this was first reported in 2010 (when Gecko actually had the same error) and was currently marked by WONTFIX , I would not hold my breath for a real fix. You can open a new error, now it can be "doable".

As a workaround: put the stripes on the table so as not to confuse the rendering mechanisms, instead of styling the lines you want to strip, do not erase the rest of the lines, for example:

 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 are only highlighting the specified line as you plan. If for some reason there is an opaque background due to unpainted lines, you are probably not sure about this because of this error.

Updated code . Works the same in IE, FF, and Chrome without "hickups."

Answer 2

Is it possible to move the .striped class to a table instead of a 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

Answer 3

You can define background-attachment: fixed; in 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 Koyer here https://css-tricks.com/stripes-css/ Find the Funky Town part.

The gradient will remain fixed when scrolling through the page, but it will be better than the “jagged” style.

Answer 4

Strong power :before/:after ... not so powerful with strings.
The following solution works fine in Fx and Chrome using your simple example (although only with :after , since there is a strange error, if you use :before - see the comment in the fiddle), but if you add the first line without a strip, then only Firefox since it allows both tr { position: relative } and table { position: relative } , while Chrome does not like the former rule, and with the latter, it obviously stripes the entire table.

Fiddle

Matching CSS:

 table { position: relative; } .striped:after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; /* Whole area of tr */ background: repeating-linear-gradient( 45deg, #FFFFFF, #FFFFFF 10px, #DDDDDD 10px, #DDDDDD 20px ) } 

edit: pseudo in the first cell of a striped line with a width of 2000%: http://codepen.io/anon/pen/lqDKk (Chrome doesn’t like filling in the third example while the distance between the borders is fine. Visible widths on my computer)

Answer 5

You can try to break the <td> annoying behavior by changing its display mode from table-cell to inline-block .

The obvious drawback is that a predetermined width is needed (for all tds or for a column or for one td, etc.).

Just make sure that this solution breaks something in your layout (but since <table> is still display: table; and <tr> is still display: table-row , this change can have minimal and zero impact, based on your design).

• Launch demo

 td { padding : 10px; display : inline-block; width : 30%; } 

Answer 6

Answering another question ( Diagonal CSS gradient for <tr> in Chrome ), I found this, so let me post my answer here too ...

I came across the same question a while ago ... The only solution I found was to make tr a display:block . It works, although it may cause some layout problems ...

http://jsfiddle.net/p3s3zLja/4/

 tr { color: white; background: linear-gradient(to bottom right, blue, red); position: relative; display: block; }