如何在表格行上重叠框阴影？答案

【问题标题】：How to overlap box-shadows on table rows?如何在表格行上重叠框阴影？
【发布时间】：2020-05-30 10:55:41
【问题描述】：

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

我的策略是将名为“selected-top”的类应用于选择的第一行，将“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>
<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，就像这样：（左边是错误的阴影，右边是正确的阴影）

【问题讨论】：

您不需要在 tr 前面加上句点 '.' 以便 CSS 选择器设置元素样式。例如tr.selected-top
@yinsweet 哦，这只是简化答案的一个错字。已更正，问题仍然存在。
@svenema 您能否提供您获得的输出和预期输出的完整图像
@Adityatoke;添加了屏幕截图，如果我的问题没有明确说明，我们深表歉意。
@svenema 感谢您的截图，将为您提供解决方案

标签： css html-table z-index box-shadow

【解决方案1】：

您可以使用::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>

【讨论】：

结果很好，但我并不完全理解解决方案。您能否添加一些解释。似乎玩弄高度可以让你掩盖阴影？
我试图在答案中添加解释。是的，qseudo 元素高度掩盖了阴影。

【解决方案2】：

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>

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

【讨论】：