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

问题

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.

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

回答2:

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

回答3:

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.

回答4:

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)

回答5:

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%;
}

回答6:

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;
}

来源：https://stackoverflow.com/questions/25625216/how-to-make-repeating-linear-gradient-for-a-table-continue-seamlessly-over-multi