29

Is it possible to have a background gradient that spans an entire table row? I'm only able to apply the background to individual table cells, even when I'm specifically trying to prevent that. Here is a boiled-down sample that targets Webkit on jsfiddle:

http://jsfiddle.net/cGV47/2/

As you can see, I am using border-collapse:collapse and I am specifying background:transparent for the <tr> and <th> child elements, yet the red gradient to the left is repeated for each table cell. I've tried applying the background to the <tr> as well, but with the same result as you see now.

To view the code without going to jsfiddle, here it is:

html

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>un</td>
            <td>deux</td>
            <td>trois</td>
            <td>quatre</td>
        </tr>
    </tbody>
</table>

css

* {margin:0;padding:0;border:0;border-collapse:collapse;}
table { width:100%; }
thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); }
thead tr, thead th { background:transparent; }
1
  • i can confirm that this is still happening to me in chrome 33. and is a documented bug in chromium
    – DMTintner
    Mar 4, 2014 at 12:55

4 Answers 4

42

set background-attachment:fixed; on thead and it will work fine

http://jsfiddle.net/cGV47/64/

6
  • The question's so old it's got whiskers on it, but that solution does work great. Thanks @jekcom.
    – Andrew
    Aug 15, 2014 at 6:13
  • In case it helps someone else: This worked for me (applying it to a .highlight row instead of thead); however, I strangely needed to add an !important flag to the background-attachment for it to work. Adding the flag to the background rule as well broke the behavior again. I could not discern the reason behind either. Sep 12, 2014 at 5:34
  • 1
    I know this is years later, but this worked for Edge as well... what is it with MS browsers... Thanks for the tip!
    – Cydaps
    Feb 15, 2019 at 22:03
  • This solution doesn't seem to work for me. The fiddle in the answer seems to produce the same result as the fiddle in the question.
    – Brent
    Apr 18, 2019 at 2:20
  • Can you help me? I have a problem stackoverflow.com/questions/62102558/…
    – UnitDen
    May 30, 2020 at 14:00
7

I think there is a better solution to these:

  • Apply the gradient background to the whole table.
  • Then apply a solid background for thead and tfooter.

table { border:0; border-collapse:collapse;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */            
}

table thead, tfoot {
    background: #fff;
}

Take a look: http://jsfiddle.net/5brPL/

1
  • logged in just to upvote this, genius! Oct 27, 2022 at 10:26
2

I have found myself testing the brand new repeating-linear-gradient, which apparently works for <tr> elements (I have only tested in Google Chrome though).

The trick is to provide the widest repeating pattern, so that... it does not repeat.

Try this:

tr {
    background: repeating-linear-gradient(
        45deg,
        red 0%,
        blue 100%
    );
}

http://jsfiddle.net/slyy/2pzwws0d/

0

Not the prettiest solution, but it does do the trick. You just set up each th to have 25% of the color range. The example below uses a color range from 0 to 255.

http://jsfiddle.net/cGV47/3/

Same HTML that you already have. Here's the CSS:

table { width:100%; }

th {
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
                                              rgba(191,191,191,1) 100%);
}
th + th {
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
                                              rgba(128,128,128,1) 100%);
}
th + th + th {
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
                                              rgba(64,64,64,1) 100%);
}
th + th + th + th {
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
                                              rgba(0,0,0,1) 100%);
}

I found this issue on Google: http://code.google.com/p/chromium/issues/detail?id=122988 but there is no solution.

Firefox does not have this issue (didn't check any other browsers):
http://jsfiddle.net/cGV47/4/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.