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.

possible duplicate of [CSS3 cross browser linear gradient](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient) — phpguest, Sep 02 '14 at 14:05
@DavidKhasikyan This question is about a specific problem with table styling in google chrome. It is not a duplicate of the given question. — stefan.s, Sep 02 '14 at 14:22
It's even worse with a 7-character cell. `td {background: transparent}` or none doesn't help. Well... — FelipeAls, Sep 02 '14 at 15:54

Niels Keurentjes · Accepted Answer · 2014-09-05T16:15:19.963

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

No reason is given for marking the [Chromium bug](https://code.google.com/p/chromium/issues/detail?id=44361) as `WontFix`, I'd suggest opening a new one. — robertc, Sep 05 '14 at 15:33

score 3 · Answer 2 · answered Oct 15 '15 at 14:02

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.

This worked perfectly for me. Not sure why this isn't considered the answer (unless it's just too late)... — Jim, Apr 19 '16 at 20:33

stefan.s · Answer 3 · 2014-09-02T14:20:35.513

1

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

edited Sep 02 '14 at 14:20

answered Sep 02 '14 at 14:03

stefan.s

3,489
2
30
44

Unfortunately no, I need to have a specific row highlighted this way. – merryprankster Sep 03 '14 at 05:35

FelipeAls · Answer 4 · 2014-09-02T16:42:19.003

The mighty power of :before/:after… not so mighty with rows.
Following solution works fine in Fx and Chrome with your simple example (though only with :after as there's a strange bug if you use :before - see comment in fiddle) but if you add a first non-striped row, then only Firefox plays nice as it allows both tr { position: relative } and table { position: relative } while Chrome doesn't like the former rule and with the latter it'll obviously stripe the whole table.

Fiddle

Relevant 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 on first cell of striped row with a 2000% width: http://codepen.io/anon/pen/lqDKk (Chrome doesn't like padding in 3rd example while border-spacing is OK. Weird widths on my computer)

Andrea Ligios · Answer 5 · 2014-09-05T15:02:21.187

You could try breaking <td>'s annoying behaviour by changing its displaying mode from table-cell to inline-block.

The obvious drawback is that a predefined width is needed (per all tds, or per column, or per single td, etc...).

Just check IF this solution breaks something in your layout (but since <table> is still display: table; and <tr> is still display: table-row, this change could have minimal to zero impacts, basing on your design).

Running demo

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

score 0 · Answer 6 · edited May 23 '17 at 12:34

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

I ran into this same issue some time ago... Only solution I found was to make the tr a display:block. It works, though it can cause some layout issues...

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

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

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

6 Answers6

Linked