Horizontally Scrollable Table

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

.h-scroll-table {
    /* The table itself should be allowed to be wider than its container */
    width: 100%;
    /* A min-width can prevent the table from becoming too crushed on small screens. */
    /* Adjust this based on your content. */
    min-width: 800px; 
    
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.h-scroll-table thead th {
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
}
.h-scroll-table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
}
.h-scroll-table tbody tr:last-child td {
    border-bottom: none;
}
.h-scroll-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

</style>

<div class="scrollable-table-container">
    <table class="h-scroll-table">
        <thead>
            <tr>
                <th scope="col">Order ID</th>
                <th scope="col">Customer</th>
                <th scope="col">Email</th>
                <th scope="col">Items</th>
                <th scope="col">Total</th>
                <th scope="col">Order Date</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ORD-101</td>
                <td>Jack Dingle</td>
                <td>jack.dingle@example.com</td>
                <td>3</td>
                <td>$150.00</td>
                <td>2024-08-20</td>
                <td>Shipped</td>
            </tr>
             <tr>
                <td>ORD-102</td>
                <td>Ally Smith</td>
                <td>ally.smith@example.com</td>
                <td>1</td>
                <td>$45.50</td>
                <td>2024-08-21</td>
                <td>Processing</td>
            </tr>
             <tr>
                <td>ORD-103</td>
                <td>Sam Wilson</td>
                <td>sam.wilson@example.com</td>
                <td>5</td>
                <td>$320.75</td>
                <td>2024-08-21</td>
                <td>Shipped</td>
            </tr>
             <tr>
                <td>ORD-104</td>
                <td>Maria Garcia</td>
                <td>maria.garcia@example.com</td>
                <td>2</td>
                <td>$99.00</td>
                <td>2024-08-22</td>
                <td>Delivered</td>
            </tr>
        </tbody>
    </table>
</div>