Как перекрыть тени блока на строках таблицы? - PullRequest
Новая
       115

Как перекрыть тени блока на строках таблицы?

1 голос
/ 30 мая 2020

У меня есть таблица, в которой я хочу выделить несколько последовательных строк (TR), применив вокруг них тень блока.

Моя стратегия заключалась в применении класса с именем «selected-top» к первая строка выделения, классы «selected-middle» для средней части и «selected-bottom» для последней строки.

Однако тени средних строк выходят за пределы. Я попытался исправить это, используя z-index (я знаю, что мне нужно добавить к нему относительное свойство, поэтому я и сделал), но они, похоже, не действуют:

enter image description here

Вот код: 

  tr.selected-top {
    box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
    position: relative;
    z-index:10;
  }
  tr.selected-middle {
    box-shadow: -5px 0px 5px #000, 5px 0px 5px #000;
    position: relative;
    z-index: -1;
  }

Это обычная таблица: 

<table>
<tr><td>stuff</td></tr>
<tr class="selected-top"><td>highlighting starts</td></tr>
<tr class="selected-middle"><td>highlighting middle</td></tr>
<tr class="selected-bottom"><td>highlighting end</td></tr>
<tr><td>other stuff</td></tr>
</table>

Что я делаю не так?

Кстати, я попытался применить тень только к сторонам средних рядов, но таким образом тень не будет непрерывной.

Обновление: @Aditya Toke, вот так: (слева неправильная заливка , справа правильная штриховка) enter image description here

Ответы [ 2 ]

2 голосов
/ 30 мая 2020

Вы можете добиться этого, используя псевдоэлементы ::before и ::after, чтобы замаскировать верхнюю и нижнюю тень от «среднего» ряда.

Высота псевдоэлементов устанавливается точно равной длине тени для маскирования и является абсолютной позицией.

Поскольку тень скрывает верхние границы selected-bottom и его следующего брата элемент, нам нужно добавить их обратно как: 

tr.selected-middle td,
tr.selected-bottom td {
  border-bottom: 1px solid #666;
}


body {
  background-color: #1b1b1b;
  margin: 20px;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: auto;
  box-sizing: border-box;
  border: none;
  margin: auto;
}

tr { display: block; }
tr, td {
  height: 50px;
  background: #333;
  color: #eee;
}

td {
  padding-left: 16px;
  min-width: 170px;
  width: 100%;
  border-top: 1px solid #666;
}
tr.selected-top {
    position: relative;
    box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
}
tr.selected-middle {
    position: relative;
    box-shadow: 0px 0px 5px 5px #000;
}
tr.selected-bottom {
    position: relative;
    box-shadow: 5px 5px 5px #000, -5px 5px 5px #000;
    
}
tr.selected-middle ::before,
tr.selected-middle ::after {
    pointer-events: none;
    position: absolute;
    content:" ";
    background-color: #333;
    left: 0;
    width: 100%;
}
tr.selected-middle ::before {
    height: 10px;
    top: -10px;
}
tr.selected-middle ::after {
    top: calc(100% + 4px);
    height: 5px;
}

tr.selected-middle td,
tr.selected-bottom td {
  border-bottom: 1px solid #666;
}
<table>
  <tbody>
    <tr>
        <td>Some stuffs</td>
    </tr>
    <tr class="selected-top">
        <td>highlighting starts</td>
    </tr>
    <tr class="selected-middle">
        <td>highlighting middle</td>
    </tr>
    <tr class="selected-bottom">
        <td>highlighting ends</td>
    </tr>
     <tr>
        <td>Some stuffs</td>
    </tr>
  </tbody>
</table>
1 голос
/ 30 мая 2020 

table {

  height: 67vh;
    width: 59vw;
    background-color: #333333;
}

td {
/*   background-color: #333333; */
    color: white;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
  height: 100%;
  border: 1px solid darkgrey;
  border-left: 0;
  border-right: 0;
}

.div2 {
 box-shadow: -4px 0px 2px 0.5px #000, 2px 0px 0.5px 0.5px #000, 5px 0.5px 3px 0px #000;
  height: 100%;
  border: 1px solid #333333;
}

.div3 {
  box-shadow: -6px 3px 5px #000, 6px 5px 6px 1px #000;
  height: 100%;
  position: relative;
  border: 1px solid darkgrey;
  border-left: 0;
  border-right: 0;
}
<!DOCTYPE html>
<html lang="en">

<body>

  <table>
    <tr>
      <td>stuff</td>
    </tr>
    <tr class="selected-top">
      <td>
        <div class="div1">
          highlighting starts
        </div>
      </td>
    </tr>
    <tr class="selected-middle">
      <td>
        <div class="div2">
          highlighting middle
        </div>
      </td>
    </tr>
    <tr class="selected-bottom">
      <td>
        <div class="div3">
          highlighting end
        </div>
      </td>
    </tr>
    <tr>
      <td>other stuff</td>
    </tr>
  </table>

</body>

</html>

Я попытался создать аналогичный тому, что вы предоставили в ожидаемом выходе

...