CODEWITHSUNDEEP
javascripthtmlcsshtml-table
Heisenberg
Heisenberg

Reputation: 5299

Is there a way for multicolor bordering

I have td and it's css is now like this

td {
   border-bottom: 3px solid aqua;
}

By clicking these cells, I would like to change its color like below pictures.

target picture

Is there a way to change multi color bordering?

Thanks

Upvotes: 2

Views: 76

Answers (2)

Rickard Elimää
Rickard Elimää

Reputation: 7591

Expanding upon @king neo's code here. I tried box-shadow: inset, and ::before to give a second line, apart from the border itself, but failed with it. Even border didn't work, because the bottom-border is stumped at the corners, when meeting the border-left and border-right.

All I could think of is to use background with a gradient. This is a fake border though, and any elements inside the td cell will be on top of it. You can fix this with padding, but the table will jump around if you add padding on selection. Therefor, you need to add padding on non-selected rows too.

I also used CSS variables so it's easy to change several things on one place.

var prevRow = null;
function toggle(it) {
  if (it.className.substring(0, 3) == "sel")
    {
    it.className = it.className.substring(3, 6);
     prevRow = null;
     }
  else
    {
    it.className = "sel" + it.className;
    
     if (prevRow != null)
       {
       prevRow.className = prevRow.className.substring(3, 6);
       }
     prevRow = it;
     }
}
 :root {
   --color-cyan: #00ffff;
   --color-yellow: #ffff00;
   --border-width: 2px;
 }

tr:nth-child(odd) {
  background-color: lightblue;
}
tr:nth-child(even) {
  background-color: lightgrey;
}

td {
  padding: var(--border-width);
}

.selodd > td,
.selevn > td {
  --yellow-end-point: var(--border-width);
  --cyan-end-point: calc(2 * var(--border-width));
  --transparent-starting-point: calc(3 * var(--border-width));

  background: linear-gradient(to top,
    var(--color-yellow) var(--yellow-end-point),
    var(--color-cyan) var(--cyan-end-point),
    transparent var(--transparent-starting-point));
  background-repeat: no-repeat;
}
<table border>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
</table>

Upvotes: 2

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3248

play around this code

var prevRow = null;
function toggle(it) {
  if (it.className.substring(0, 3) == "sel")
    {
    it.className = it.className.substring(3, 6);
     prevRow = null;
     }
  else
    {
    it.className = "sel" + it.className;
    
     if (prevRow != null)
       {
       prevRow.className = prevRow.className.substring(3, 6);
       }
     prevRow = it;
     }
}
.odd {
  background-color: lightblue;
}
.evn {
  background-color: lightgrey;
}
.selodd {
  background-color: yellow;
}
.selevn {
  background-color: yellow;
}
<table border>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
</table>

Upvotes: 0

Related Questions