如何在 table 行上重叠框阴影？

Question

我有一个 table，我想通过在它们周围应用框阴影来突出显示许多连续的行 (TR)。

我的策略是将名为 "selected-top" 的 class 应用到所选内容的第一行，classes "selected-middle" 用于中间部分，"selected-bottom" 最后一行。

但是，中间行的阴影溢出了。我试图通过使用 z-index 来纠正这个问题（我知道我必须添加一个相对的属性，所以我这样做了），但它们似乎没有效果：

代码如下：

  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只是一个普通的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>

我做错了什么？

顺便说一句，我确实尝试只在中间行的边上应用阴影，但那样阴影就不是连续的了。

更新：@Aditya Toke，像这样：（左边是错误的阴影，右边是正确的阴影）

Answer 1

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>

我尝试创建类似于您在预期输出中提供的内容

Answer 2

您可以使用 ::before 和 ::after 伪元素来掩盖 "middle" 行的顶部和底部阴影。

伪元素的高度设置为完全等于遮罩阴影的长度，并且是绝对位置。

由于阴影隐藏了 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>

如何在 table 行上重叠框阴影？

How to overlap box-shadows on table rows?

css

html-table

z-index

box-shadow