仅将阴影应用于表格行

Question

我希望将阴影仅应用于表格行之间的行。在“红色”线下面的示例中。我不希望阴影应用于蓝色边框。

如果有人可以摆弄下面的片段来让它发挥作用，那么他们将成为我当时的英雄。

编辑：我看到我的片段有尖红线问题。理想情况下，我实际上想要一个坚实的非划分红线。

这是我正在寻找的那种效果：

.shadow {
  margin: 20px;
  width: 80%;
  background: yellow;
  border-radius: 15px;
  border: 2px solid blue;
}
.shadow td, .shadow th {
  border-top: 5px solid red;
  border-right: 2px solid blue;
  padding: 10px;
  text-align: center;
}
.shadow th {
  border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
  border-right: none;
}

<div>
  <table class="shadow">
    <tr>
      <th>AH</th>
      <th>BH</th>
      <th>CH</th>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </table>
</div>

Answer 1

在我看来，以下代码段将解决您的问题。如果有什么不好或者你需要解释的东西，请告诉我。基本上我将盒子阴影添加到所有td和th，然后我使用：last-child selector

从最后一行中删除它们

编辑：正如评论中所建议的那样，我更新了仅添加

.shadow tr:not(:last-child) td, .shadow th{ 
  box-shadow: 0px 10px 5px rgba(0,0,0,0.6);
}

也可以做到这一点

.shadow {
  margin: 20px;
  width: 80%;
  background: yellow;
  border-radius: 15px;
  border: 2px solid blue;
}
.shadow td, .shadow th{
  border-top: 5px solid red;
  border-right: 2px solid blue;
  padding: 10px;
  text-align: center;
}

.shadow tr:not(:last-child) td, .shadow th{ 
  box-shadow: 0px 10px 5px rgba(0,0,0,0.6);
}

.shadow th {
  border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
  border-right: none;
}

<div>
  <table class="shadow">
    <tr>
      <th>AH</th>
      <th>BH</th>
      <th>CH</th>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </table>
</div>

Answer 2

您可以使用:after伪元素和position: absolute：

进行制作

.shadow {
  margin: 20px;
  width: 80%;
  background: yellow;
  border-radius: 15px;
  border: 2px solid blue;
}
.shadow td, .shadow th {
  border-top: 5px solid red;
  border-right: 2px solid blue;
  padding: 10px;
  text-align: center;
  position: relative;
}
.shadow th {
  border-top: none;
}
.shadow td:last-child, .shadow th:last-child {
  border-right: none;
}
.shadow td:after, .shadow th:after {
  content: '';
  display: block;
  box-shadow: black 1px 3px 3px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.shadow tr:last-child td:after, .shadow tr:last-child th:after {
  display: none;
}

<div>
  <table class="shadow">
    <tr>
      <th>AH</th>
      <th>BH</th>
      <th>CH</th>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </table>
</div>

Answer 3

这是我的贡献，希望它有所帮助。 ：）

＆＃13;

＆＃13;

.table {
  margin: 20px;
  width: 80%;
  background: yellow;
  border-radius: 15px;
  border: 2px solid blue;
  border-spacing: 0px;
}

.table tr {
  box-shadow: 0 3px 4px -1px rgba(0,0,0,0.65);
}

.table th, .table td {
  padding: 10px;
  text-align: center;
  border-bottom: 4px solid red;
  border-right:2px solid blue;
}

.table tr:last-child td  {
  border-bottom: none;
}

.table tr td:last-child,
.table tr th:last-child{
  border-right: none;
}

.table tr:last-child {
  box-shadow: none;
}

＆＃13;

<div>
  <table class="table">
    <tr>
      <th>AH</th>
      <th>BH</th>
      <th>CH</th>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;