How to overlap box-shadows on table rows?

Question

I have a table on which I want to highlight a number of successive rows (TR's) by applying a box-shadow around them.

My strategy was to apply a class called "selected-top" to the first row of the selection, classes "selected-middle" for the middle part, and "selected-bottom" for the last row.

However, the shadows of the middle rows bleed over. I tried to rectify this by using z-index (I know that I have to add a relative property with that, so I did), but they seem to have no effect:

Here's the code:

  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;
  }

The table is just a regular table:

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

What am I doing wrong?

By the way, I did try to only apply a shadow to only the sides for the middle rows, but that way the shadow is not continuous.

Update: @Aditya Toke, like so: (left is wrong shading, right is correct shading)

You do not need period **'.'** in front of tr for the CSS selectors to style the element. e.g. `tr.selected-top` — yinsweet, May 30 '20 at 11:03
@yinsweet Oh, that's just a typo from simplificating the answer. Corrected, question still stands. — svenema, May 30 '20 at 11:29
@svenema can you provide a full image of the output you get and the intended output — Aditya toke, May 30 '20 at 12:14
@Adityatoke; screenshot added, apologies if my question wasn't stated clearly. — svenema, May 30 '20 at 13:04
@svenema Thanks for the screenshot will work on it, to provide you with the solution — Aditya toke, May 30 '20 at 14:08

Sree.Bh · Accepted Answer · 2020-05-30T18:47:32.050

You can achieve it using ::before and ::after pseudo elements to mask the top and bottom shadow from "middle" row.

The height of the pseudo elements is set exactly equal to the length of the shadow for masking and is absolute position.

Since the shadow hides the top borders of selected-bottom and it's next sibling element we need to add them back as:

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>

The result is great, but I'm not entirely understanding the solution. Could you perhaps add a bit of explanation. It seems that playing with the height somehow enables you to mask the shadow? — svenema, May 30 '20 at 18:31
I tried to add an explanation in the answer. Yes the qseudo element height masks the shadow. — Sree.Bh, May 30 '20 at 18:49

score 1 · Answer 2 · answered May 30 '20 at 15:08

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>

I tried to create similar to what you have provided in the expected output

How to overlap box-shadows on table rows?

2 Answers2

Linked