Как я могу получить градиентное обрамление ячейки td по всей таблице?

Question

table {
  width:200px;
  height: 100px;
}

td {
 width:20px;
 height: 20px;
 background: gray;
}

td:hover {
  background: linear-gradient(270deg, rgba(42, 115, 163, 0.354167) 0%, rgba(42, 115, 163, 0.2) 0.01%, #2A73A3 34.8%, rgba(42, 115, 163, 0.2) 98.82%);

  border: 1px solid;

  border-image-source: linear-gradient(270deg, rgba(42, 115, 163, 0.354167) 0%, rgba(42, 115, 163, 0.2) 0.01%, #2A73A3 34.8%, rgba(42, 115, 163, 0.2) 98.82%);
}

<table>
  <tr>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
  </tr>
  <tr>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
  </tr>
  <tr>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
  </tr>
  <tr>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
  </tr>
<table>

CSS с макета, пробовал бордером, тенями, background, не пойму в какую сторону копать, чтобы получить такой результат, может как то можно использовать Jquery ...

Answer 1

получить градиентное обрамление

вы про полоски на всю таблицу от ховерной ячейки?

:root{
--grid-w: 300px;
--grid-h: 300px;
}
p{margin: 0; z-index: 3;
}
#x{
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 1fr;
height: var(--grid-h);
width: var(--grid-w);
overflow: hidden;
border: 1px solid red;
z-index: 2;
}
p:hover:after, p:hover:before{
content: '';
position: absolute;
pointer-events: none;
height: 20%;
width: 20%;
z-index: 1;
}
p:hover:after{
width: var(--grid-w);
background: linear-gradient(90deg, lightblue, darkblue, lightblue);
left: 0;
}
p:hover:before{
height: var(--grid-h);
top: 0;
background: linear-gradient(0deg, lightblue, darkblue, lightblue);
}

<div id='x'>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>

ну как то так...

Answer 2

Такой вариант с помощью псевдоэлементов ::after и ::before, которые позиционированы абсолютно относительно всей таблицы и имеют по две границы фиксированной ширины/высоты (как у ячейки таблицы).

:root {
  --cell-width: 30px;
  --cell-height: 30px;
}
table {
  border: 1px solid black;
  border-collapse: collapse;
  position: relative;
}
th, td {
  width: var(--cell-width);
  height: var(--cell-height);
}
td:not(.name):hover {
  background: #dce8f1;
}
td:not(.name):hover:after, td:not(.name):hover:before{
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
td:not(.name):hover:after{
  width: 100%;
  height: var(--cell-height);
  left: 0px;
  transform: translateY(-50%);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image-source: linear-gradient(90deg, rgba(42, 115, 163, 0.354167) 0%, rgba(42, 115, 163, 0.2) 0.01%, #2A73A3 34.8%, rgba(42, 115, 163, 0.2) 98.82%);
  border-image-slice: 1;
}
td:not(.name):hover:before{
  height: 100%;
  width: var(--cell-width);
  top: 0px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-image-source: linear-gradient(0deg, rgba(42, 115, 163, 0.354167) 0%, rgba(42, 115,     163, 0.2) 0.01%, #2A73A3 34.8%, rgba(42, 115, 163, 0.2) 98.82%);
  border-image-slice: 1;
}

<table>
  <thead>
    <th></th>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    <th>Пт</th>
    <th>Сб</th>
    <th>Вс</th>
  </thead>
  <tr>
    <td class="name">Андрей</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="name">Павел</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="name">Максим</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="name">Ольга</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="name">Виталий</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

БЛОГ НА HUSL

Как я могу получить градиентное обрамление ячейки td по всей таблице?

Ответы (2 шт):