Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table with gradient borders and cell gradient borders

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.

Table with gradients

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>
like image 649
Ruslan López Avatar asked Jul 14 '15 22:07

Ruslan López


People also ask

Can we apply border to a cell in a 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.

Can I use linear gradient in border color?

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.

How do you add a gradient color to a border in CSS?

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.


1 Answers

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.

enter image description here

like image 123
Harry Avatar answered Sep 20 '22 18:09

Harry