​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
/*
6
  The wrapper DIV that enables horizontal scrolling.
7
  This is the key to the entire technique.
8
*/
9
.scrollable-table-container {
10
    overflow-x: auto; /* Enables horizontal scrolling */
11
    -webkit-overflow-scrolling: touch; /* Optional: Enables smooth scrolling on iOS devices */
12
    border: 1px solid #ddd;
13
    border-radius: 8px;
14
}
15
​
16
.h-scroll-table {
17
    /* The table itself should be allowed to be wider than its container */
18
    width: 100%;
19
    /* A min-width can prevent the table from becoming too crushed on small screens. */
20
    /* Adjust this based on your content. */
21
    min-width: 800px;
22
    
23
    border-collapse: collapse;
24
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
25
}
26
​
27
.h-scroll-table thead th {
28
    padding: 12px 15px;
29
    background-color: #f8f9fa;
30
    border-bottom: 2px solid #dee2e6;
31
    text-align: left;
32
    font-weight: 600;
33
}
34
.h-scroll-table tbody td {
35
    padding: 10px 15px;
36
    border-bottom: 1px solid #e9ecef;
37
}
38
.h-scroll-table tbody tr:last-child td {
39
    border-bottom: none;
40
}
41
.h-scroll-table tbody tr:nth-of-type(even) {
42
    background-color: #f8f9fa;
43
}
44
​
45
</style>
46
​
47
<!--
48
    To see the effect, view this on a narrow screen
49
    or shrink your browser window to be less than the table's min-width of 800px.
50
-->
51
<div class="scrollable-table-container">
52
    <table class="h-scroll-table">
53
        <thead>
54
            <tr>
55
                <th scope="col">Order ID</th>
56
                <th scope="col">Customer</th>
57
                <th scope="col">Email</th>
58
                <th scope="col">Items</th>
59
                <th scope="col">Total</th>
60
                <th scope="col">Order Date</th>
61
                <th scope="col">Status</th>
62
            </tr>
63
        </thead>
64
        <tbody>
65
            <tr>
66
                <td>ORD-101</td>
67
                <td>Jack Dingle</td>
68
                <td>jack.dingle@example.com</td>
69
                <td>3</td>
70
                <td>$150.00</td>
71
                <td>2024-08-20</td>
72
                <td>Shipped</td>
73
            </tr>
74
             <tr>
75
                <td>ORD-102</td>
76
                <td>Ally Smith</td>
77
                <td>ally.smith@example.com</td>
78
                <td>1</td>
79
                <td>$45.50</td>
80
                <td>2024-08-21</td>
81
                <td>Processing</td>
82
            </tr>
83
             <tr>
84
                <td>ORD-103</td>
85
                <td>Sam Wilson</td>
86
                <td>sam.wilson@example.com</td>
87
                <td>5</td>
88
                <td>$320.75</td>
89
                <td>2024-08-21</td>
90
                <td>Shipped</td>
91
            </tr>
92
             <tr>
93
                <td>ORD-104</td>
94
                <td>Maria Garcia</td>
95
                <td>maria.garcia@example.com</td>
96
                <td>2</td>
97
                <td>$99.00</td>
98
                <td>2024-08-22</td>
99
                <td>Delivered</td>
100
            </tr>
101
        </tbody>
102
    </table>
103
</div>