Wenden Sie einen Schlagschatten nur auf den oberen Rand der Tabellenzeilen an

Question

Ich suche einen Schatten nur auf die Linie, die zwischen den Tabellenzeilen verläuft. Im Beispiel unterhalb der "roten" Linien. Ich möchte nicht, dass der Schatten auf die blauen Ränder angewendet wird.

Wenn jemand den folgenden Ausschnitt fiddle, um es zur Arbeit zu bringen, wären sie mein Held des Tages.

EDIT: Ich sehe mein Snippet hat die rote Linie Problem. Idealerweise möchte ich eigentlich eine feste nicht geteilte rote Linie.

Dies ist die Art von Wirkung, die ich suche:

.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

Hier ist mein Beitrag, hoffen, es hilft. :)

.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

Es scheint mir das folgende Snippet Ihr Problem lösen. Lass mich wissen, wenn etwas nicht gut ist oder du etwas erklärt hast. Im Grunde habe ich die Box Schatten auf alle TDs und th, und dann habe ich einfach entfernt sie aus der letzten Reihe mit dem: last-Kindselektor

EDIT: Wie in den Kommentaren vorgeschlagen, ich aktualisiert die Zugabe von nur

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

, die den Trick auch

.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

tut Sie es mitmachen könntePseudoelement und 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>