Multi color border for table Cell

Question

For certain table cells i would like to have a multi colored top-border or bottom-border.

Based on how-to-create-multi-color-border-with-css and css-multi-color-border i was able to create a multi color border.

The problem is that i want to combine it for a table cell td where some cells have a normal border and others have a multi color border.

This code below sets the multi color for a cell but as soon as a i want to add black borders for "normal" cells it overwrites the multi color border (see codepen)

<style>

.works  .gap-from {
  text-align:center;
  border-bottom: 4px solid;
  border-image:  linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
}
</style>


<table class="works">
  <tr><td>no color border</td><td class="gap-from">without span</td></tr>
  <tr><td><span class="gap-from">with span</span></td></tr>  
</table>

It seems to make it partly work a background color must be set for the table. But this leads to thick border lines.

table.works {background-color: black;}
table.works colgroup {background-color: white;}

FYI: the purpose is to visualize date overlaps and date gaps.

Question

What can be done to have

normal thin borders for every cell
multi color borders for certain cells
without using additional markup (an additional span)?

Mr. Brickowski · Accepted Answer · 2021-05-03T08:02:28.097

Because both normal cell and multicolor cell use the same border property to achieve the border look and feel, one must overwrite the other. If you need 2 border for multicolor cell, you may transfer one border to another element. Since there is a requirement (without using additional markup), we can make use of the psuedo element to host the multicolor border. Thus all cell will have thin black border and multicolor cell will have an additional thick multicolor bottom border.

table {
  border-collapse: collapse;
}

td {
  position: relative;
  /* normal thin borders for every cell */
  border: 1px solid black;
}

/* let the psuedo element host the multi-color border, so it wont be overritten by normal td */
td.multiColor:after {
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
  /* psuedo element positioning */
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  /* tell the borowser its border width is included with its element size, so it will not overlap with td border */
  box-sizing: border-box;
}

<table>
  <tr>
    <td>normal cell</td>
    <td class='multiColor'>multi color</td>
  </tr>
  <tr>
    <td class="multiColor">multi color</td>
    <td>normal cell</td>
  </tr>
</table>

Multi color border for table Cell

Question

1 Answers1