Применить тень к верхней границе строк таблицы

Question

Я ищу применить тень только к строке, которая проходит между строками таблицы. В примере ниже «красные» линии. Я не хочу, чтобы тень применялась к синим границам.

Если кто-нибудь может поиграть с нижеприведенным фрагментом, чтобы заставить его работать, это был бы мой герой дня.

EDIT: Я вижу, что у моего фрагмента есть проблема с красной линией. В идеале я действительно хочу сплошную не разделенную красную линию.

Это своего рода эффект Я ищу:

.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

Мне кажется, следующий фрагмент кода будет решить вашу проблему. Дайте мне знать, если что-то не так, или вам нужно что-то объяснить. В основном я добавил тень коробки для всех ТД и я, а потом я просто удалил их из последней строки с помощью: последнего-ребенка селектора

EDIT: Как было предложено в комментариях, я обновил добавление только

.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

Вы можете сделать это с :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>