將陰影僅應用於表格行的頂部邊框

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

這裏是我的貢獻，希望它幫助。 :)

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

Answer 2

在我看來，下面的代碼片段將解決您的問題。讓我知道，如果有什麼不好或你需要解釋的東西。基本上，我加入了盒陰影所有TD的和次的，然後我就用去除他們從最後一行：最後一子選擇

編輯：正如評論所說，我已經更新只增加

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

您可以用使它僞元素和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>