Is it possible to set one linear gradient background on several table rows?

Question

I need to set a single linear-gradient background for 3 consecutive rows in a table:

<table>
  <tbody>
    <tr><td>1</td></tr>
    <!-- background starts here -->
    <tr class="bg"><td>2</td></tr>
    <tr class="bg"><td>3</td></tr>
    <tr class="bg"><td>4</td></tr>
    <!-- background ends here -->
    <tr><td>4</td></tr>
  </tbody>
</table>

What I now have is one gradient per row: http://jsfiddle.net/orkLLbpz/. Any ideas how to go from here?

Please note that all rows in table are in tbody element, so I can't use another tbody to group those rows.

Answer 1

I don't think this is possible, I have also same requirement in a project.

what I have done : use a css trick like this

.bg1 {
  background: linear-gradient(to bottom, #FFF 0%, #f7f6f6 100%) repeat scroll 0% 0% transparent;
}
.bg2 {
  background: linear-gradient(to bottom, #f7f6f6 0%, #f4f4f4 100%) repeat scroll 0% 0% transparent;
}
.bg3 {
  background: linear-gradient(to bottom, #f4f4f4 0%, #EEE 100%) repeat scroll 0% 0% transparent;
}

Updated Jsfiddle

This is not a proper answer but may be works for you.

Answer 2

So to get this correct, you would like to run 1 color and fade it into another across all of your rows?

The only way I could think of doing this would be to use a SCSS function.

@mixin shades-of-color ( $count, $startcolor ) {
  @for $i from 0 through $count {
   /* Adds slight amount of black to each varient of your $startcolor */
    $background-color: mix(black, $startcolor, $i + $i);

    .bg:nth-of-type(#{$i}) {
      background-color: $background-color;

      /* Allows your hover to be the same shade */
      &:hover {
        background-color: mix(white, $background-color, 20);
      }
    }
}    
}

@include shades-of-color(20,#2d89ef);
/*The `20` here is from the number of times you want it to repeat*/
/* Change the #2d89ef */ to your color of choice.

SCSS would be the only reasonable way around this since you can run it as a function, otherwise you will need to run a class on each row to define it.

Apologies if you can not use SCSS on this project, but unless you class out each row, this seems to be the only viable solutions. If you do not understand this mixin, I can explain it more in depth.

EDIT: Here is a codepen, you can see that each table row gets darker and darker by adding a shade to the previous color.

Answer 3

unfortunately without grouping them in their own tbody, it's not possible. you could split your gradient in 3 parts and add each as a background to 1st, 2nd and 3rd row, each blending in with the others, but with each row height potentially different, you might end up with areas of the gradient that look 'higher' than the others.

Answer 4

Another option could be to use an absolutely positioned element to add the linear gradient background behind the proper rows.

In this case, we have to know the height of the first/last row to set the appropriate value on top/bottom offsets.

table {
    width: 100%;
    position: relative;
    border: 1px solid; /* Just for demo */
    border-spacing: 0; /* Just for demo */
}

table:before {
    content: "";
    position: absolute;
    top: 1.2em;
    bottom: 1.2em;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    z-index: -1;
    
    outline: 1px dashed red; /* Just for demo */
}

<table>
    <tbody>
        <tr><td>1</td></tr>
        <!-- background starts here -->
        <tr class="bg"><td>2</td></tr>
        <tr class="bg"><td>3</td></tr>
        <tr class="bg"><td>4</td></tr>
        <!-- background ends here -->
        <tr><td>4</td></tr>
    </tbody>
</table>

Answer 5

i believe a cleaner move will be to set the gradient on the entire table and set background color to the first and last