Есть ли способ для многоцветного окаймления - PullRequest
Новая
       2

Есть ли способ для многоцветного окаймления

2 голосов
/ 23 февраля 2020

У меня есть td, и теперь css теперь выглядит так: 

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

Нажав на эти ячейки, я бы хотел изменить их цвет, как показано на картинках ниже.

target picture

Есть ли способ изменить многоцветную окантовку?

Спасибо

Ответы [ 2 ]

2 голосов
/ 23 февраля 2020

Расширение кода @king neo здесь. Я пробовал box-shadow: inset и :: before, чтобы дать вторую строку, кроме самой границы, но потерпел неудачу с этим. Даже граница не работала, потому что нижняя граница помечена в углах при встрече границы слева и справа.

Все, что я мог придумать, это использовать фон с градиентом. Это фальшивая граница, и любые элементы внутри ячейки td будут поверх нее. Вы можете исправить это с помощью отступов, но таблица будет перемещаться, если вы добавите отступы при выделении. Для этого вам также необходимо добавить отступы для невыбранных строк.

Я также использовал CSS переменные, поэтому легко изменить несколько вещей в одном месте. 

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>
0 голосов
/ 23 февраля 2020

игра вокруг этого кода 

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>
...