Shadowed Table

<!DOCTYPE html>
<title>My Example</title>

.shadow-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica Neue', Arial, sans-serif;

/* The Key Styles */
    background-color: #ffffff; /* Table must have a background color for shadow to work well */
    border-radius: 8px;
    /* The box-shadow property: x-offset y-offset blur-radius spread-radius color */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

.shadow-table thead th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    /* Border on the bottom of the header */
    border-bottom: 2px solid #f0f0f0; 
}
/* Apply top-left and top-right radius to header cells */
.shadow-table thead th:first-child {
    border-top-left-radius: 8px;
}
.shadow-table thead th:last-child {
    border-top-right-radius: 8px;
}

.shadow-table tbody td {
    padding: 16px;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
}
.shadow-table tbody tr:last-child td {
    border-bottom: none;
}
</style>

<div class="shadow-table-container">
    <table class="shadow-table">
        <thead>
            <tr>
                <th scope="col">Payment ID</th>
                <th scope="col">Source</th>
                <th scope="col">Date</th>
                <th scope="col">Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>PAY-987654</td>
                <td>Online Store</td>
                <td>2024-08-22</td>
                <td>$199.00</td>
            </tr>
            <tr>
                <td>PAY-987653</td>
                <td>In-Store POS</td>
                <td>2024-08-22</td>
                <td>$75.50</td>
            </tr>
            <tr>
                <td>PAY-987652</td>
                <td>Subscription Renewal</td>
                <td>2024-08-21</td>
                <td>$29.99</td>
            </tr>
            <tr>
                <td>PAY-987651</td>
                <td>Online Store</td>
                <td>2024-08-20</td>
                <td>$350.00</td>
            </tr>
        </tbody>
    </table>
</div>