仅对 table 行的上边框应用投影

Question

我希望将阴影仅应用于 table 行之间的行。在 "red" 行下方的示例中。我不想将阴影应用于蓝色边框。

如果有人可以fiddle下面的代码片段来让它工作，他们将是我今天的英雄。

编辑：我看到我的代码片段有尖红线问题。理想情况下，我实际上想要一条实心的非分割红线。

这就是我要寻找的那种效果：

.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 选择器

从最后一行删除它们

编辑：按照评论中的建议，我更新了仅添加

.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 pseudo-element and 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

这是我的贡献，希望对您有所帮助。 :)

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

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

仅对 table 行的上边框应用投影

Apply a drop shadow to only the top border of table rows

html

css

css-tables