html - Table with gradient borders and cell gradient borders -

i'd achieve table gradient on border , div borders acting whole item, mean border color of cells should diferent.

that's i've got 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>

solution

you can achieve want without border-image property setting following:

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

browser support:

• background image property has better browser support border image.

---

explanation

in essence doing here following:

• add linear-gradient background of table.
• set origin of background such starts border-box of table. (for more details on background-origin, please refer my answer here).
• separate border between table cells & rows (default setting) such background of table visible through space in between.
• add transparent border table itself. optional , required because table border in image seems thicker border between cells.

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

<!-- prefix free lib 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: have used red blue gradient in answer make effect more apparent eye.}