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> </p>
</td>
<td>
<p>Primera Sesión Extraordinaria 2015</p>
</td>
</tr>
</table>
Add or change the line style Click the table or select the cells where you want to add or change borders. On the Tables tab, under Draw Borders, on the Line Style pop-up menu, click the line style that you want. , and then click the borders that you want.
The most straight forward way is to use border-image property. You can use whatever linear-gradient or repeat-gradient you want. The border-image slice property needs to be 1 for linear gradient.
Gradient borders are not directly supported by using CSS. There are two methods to create gradient borders which are listed below: Method 1: Using border-image with gradient: The border is created by using the size and color as transparent in the border property.
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:
In essence what we are doing here is the following:
linear-gradient
as the background
of the table.border-box
of the table. (For more details on background-origin
, please refer my answer here).background
of the table
is visible through the space in between.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> </p></td>
<td><p>Primera Sesión Extraordinaria 2015</p></td>
</tr>
<tr>
<td><p> </p></td>
<td><p>Primera Sesión Extraordinaria 2015</p></td>
</tr>
<tr>
<td><p> </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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With