Order History Table

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

.order-history-table thead th {
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    color: #333;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}
.order-history-table thead .th-right {
    text-align: right;
}

.order-history-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.order-history-table tbody tr:last-child td {
    border-bottom: none;
}
.order-history-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Order ID Link Styling */
.order-id a {
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
}
.order-id a:hover {
    text-decoration: underline;
}

/* Status Badge Styling */
.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.status-delivered {
    background-color: #eafaf1;
    color: #27ae60;
}
.status-shipped {
    background-color: #ebf5fb;
    color: #3498db;
}
.status-processing {
    background-color: #fef5e7;
    color: #f39c12;
}
.status-cancelled {
    background-color: #f4f6f6;
    color: #7f8c8d;
}

.total-amount {
    font-weight: 600;
    text-align: right;
}

.action-link a {
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
}
.action-link a:hover {
    color: #343a40;
}
.action-link {
    text-align: right;
}
</style>

<table class="order-history-table">
    <thead>
        <tr>
            <th scope="col">Order</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col" class="th-right">Total</th>
            <th scope="col" class="th-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="order-id"><a href="#">#34590</a></td>
            <td>August 12, 2024</td>
            <td><span class="status-badge status-delivered">Delivered</span></td>
            <td class="total-amount">$145.50</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34502</a></td>
            <td>July 28, 2024</td>
            <td><span class="status-badge status-shipped">Shipped</span></td>
            <td class="total-amount">$89.99</td>
            <td class="action-link"><a href="#">Track Order</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34488</a></td>
            <td>July 25, 2024</td>
            <td><span class="status-badge status-processing">Processing</span></td>
            <td class="total-amount">$212.00</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34415</a></td>
            <td>June 15, 2024</td>
            <td><span class="status-badge status-cancelled">Cancelled</span></td>
            <td class="total-amount">$56.25</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
    </tbody>
</table>