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

debugcn 发表于 Dev

精液

我有一张桌子，我想通过在其周围应用方框阴影来突出显示一些连续的行（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，如下所示：（左为错误阴影，右为正确阴影）

斯瑞

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。