How to achieve a table row separator with gradient effect

Question

Here is the fiddle example.

I have a separator class:

 <div class='seperator-gradient'></div>

I also have a table:

<table class="TABLE">
<tr>
    <td></td><td></td><td></td>
 </tr>
 <tr>
    <td></td><td></td><td></td>
 </tr>
   <tr>
    <td></td><td></td><td></td>
 </tr>

CSS file:

    .seperator-gradient{
width: 100%;
height: 1px;
border-bottom: 
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}


.TABLE{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.TABLE TR:nth-child(odd) { 
    background-color:#f0f0f0;
    height: 50px;
}
.TABLE TR:nth-child(even) { 
    background-color:#fff;
    height: 50px;
}
.TABLE TD {
    vertical-align: middle;
}

now I'd like the table's border has the same feature like what I have achieved in seperator-gradient class...strong color in middle but change to lighter color to left and right.is it possible?

By the way, the table's contents were loaded using underscore at running time:

       <table class="TABLE">
           {% _.each(datas,function(c){%} 
            <tr><td>{{ c.name }}</td>
            </tr>
          {% });%}
       </table>

This is what I'd like to achieve:

Answer 1

You can try to do that as a border, but the browser support is quite limited.

A somewhat better support would be thru a multiple background solution.

.TABLE{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.TABLE TR:nth-child(odd) { 
    background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), lavender;
background-size: 100% 1px, 100% 100%;
background-position: left bottom, left top;
background-repeat: no-repeat;
height: 50px;
}
.TABLE TR:nth-child(even) { 
background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), white;
background-size: 100% 1px, , 100% 100%;
background-position: left bottom, left top;
background-repeat: no-repeat;
    height: 50px;
}
.TABLE TD {
    vertical-align: middle;
}

I have changed slightly the gradient colors because they where difficult to see with the gray in the odd strip.

What i Am doing is basically set a gradient background like yours (I have used only the w3c version, but you can add prefixed versions) that is at the bottom, 1 px height.

fiddle

As pointed out in the comment, there is a bug in several browsers about the dimensions of the background of a table row. This breaks the design if there are several td's.

One posible fix is to make the row display as block: (not sure about posible side effects, will depend on all your layout)

.TABLE tr {
    display: block;
}

fiddle

Another technique that can be used and that is probably more widely supported (and without the problem commented) would be to set the horizontal gradient in the table background. Then, in the rows, set an vertical gradient with 1 px transparency. In this transparent stripe the background will show

.test2 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
    position: absolute;
    background: -webkit-linear-gradient(0 deg,  #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%);
    background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%);
}
.test2 tr {
    height: 50px;
}
.test2 TR:nth-child(odd) { 
    background: -webkit-linear-gradient(90deg,  transparent 0px, transparent 1px, lavender 1px, lavender 100%);
    background: linear-gradient(0deg,  transparent 0px, transparent 1px, lavender 1px, lavender 100%);
}
.test2 TR:nth-child(even) { 
    background: -webkit-linear-gradient(90deg,  transparent 0px, transparent 1px, white 1px, white 100%);
    background: linear-gradient(0deg,  transparent 0px, transparent 1px, white 1px, white 100%);
}
.test2 TD {
    vertical-align: middle;
}

demo 3

Answer 2

yeah possible

.TABLE TR:nth-child(odd) td { 
     border: 1px solid black;
        margin: 5px;

}
.TABLE TR:nth-child(even) td { 
     border: 1px solid blue;
        margin: 5px;

}

Even rows have blue border and the odd ones have black border. Hope this works

To Style the top bottom left right

.TABLE TR:nth-child(odd) td { 
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         border-left: none;
         border-right: none;
         margin: 5px;

    }
    .TABLE TR:nth-child(even) td {
         border-top: 1px solid blue;
         border-bottom: 1px solid blue;
         border-left: none;
         border-right: none;
         margin: 5px;

    }

now there will be blue borders for even elements in the top and bottom edges, similarly black for odd elements

Answer 3

Take a look at these CSS tricks.

they used border-image to achieve this. Something like this:-

.top-to-bottom {
border-width:3px;
-webkit-border-image: 
    -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    

}

Answer 4

I don't believe you can do that with border. But you can wrap your table in a div, apply the background gradient to the div and then squeeze the table and div to appear to be the border.