表与渐变边框和单元格渐变边框

Question

I'd like to achieve a table with gradient on the border and div borders acting as is they were a whole item, by that I mean that the border color of the cells should be diferent.

That's what I've got so far:

 table tr:first-child td { border-top: 0; } table tr:last-child td { border-bottom: 0; } table tr td:last-child { border-right: 0; border-left: 0; } table tr td:first-child { border-left: 0; } td { border-right: 2px solid #bebebe; border-bottom: 2px solid #bebebe; } td { border-collapse: collapse; } table { /*border-collapse: collapse;*/ border-style: solid; border-width: 20px 20px; border-image-source: linear-gradient(to bottom, #eee 0%, #bebebe 100%); border-image-slice: 20; border-image-repeat: stretch; box-shadow: 0px 10px 10px black; } body { background-color: #eee; } 

 <table class="tablagradiente" align="center" width="41%"> <tr> <td> <p>Sesiones Ordinarias</p> </td> <td> <p>Sesiones Extraordinarias</p> </td> </tr> <tr> <td> <p>&nbsp;</p> </td> <td> <p>Primera Sesión Extraordinaria 2015</p> </td> </tr> </table> 

Answer 1

Solution

You can actually achieve what you want without border-image property just by setting the following:

table {
  background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */
  background-origin: border-box; /* set background to start from border-box */
  border-spacing: 5px; /* space between each cell */
  border: 5px solid transparent; /* optional */
}

Browser Support:

• Background Image property also has much better browser support than Border Image .

---

Explanation

In essence what we are doing here is the following:

• Add the linear-gradient as the background of the table.
• Set the origin of the background such that it starts from the border-box of the table. (For more details on background-origin , please refer my answer here ).
• Separate the border between the table cells & rows ( default setting) such that the background of the table is visible through the space in between.
• Add an extra transparent border to your table itself. This is optional and is only required because the table border in your image seems thicker than the border between the cells.

 table { background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */ background-origin: border-box; /* set background to start from border-box */ border-spacing: 5px; /* space between each cell */ border: 5px solid transparent; /* optional */ } body { background-color: #eee; } /* Just for demo */ table { width: 500px; } td { background: white; /* if not set cell would also be transparent and show the gradient */ } 

 <!-- prefix free lib for older browsers --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <table class="tablagradiente" align="center" width="41%"> <tr> <td><p>Sesiones Ordinarias</p></td> <td><p>Sesiones Extraordinarias</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> </table> 

^{Note: I have used a red to blue gradient in the answer to make the effect more apparent to the eye.}