Responsive table
Two ways a wide table fits a phone
It stacks
On a phone each row becomes a card, each cell with its column’s name.
| Receipt | Time | Store | Cashier | Customer | Paid by | Total |
|---|---|---|---|---|---|---|
| R-041185 | 17:26 | Market Street | Mia Novak | Ethan Okoro | Cash | $34.23 |
| R-041184 | 17:01 | Riverside | Ben Lopez | Noah Cohen | Card | $12.96 |
| R-041183 | 16:36 | Old Town | Aisha Novak | Amara Brooks | Card | $3.78 |
| R-041182 | 16:11 | Market Street | Leo Park | Grace Ivanova | Card | $55.23 |
Show the code
<div class="table-wrap" data-allow-x data-scroller="Sales, stacking"> <table class="table stack-sm"> <caption class="sr-only">Sales, stacking</caption> <thead> <tr> <th scope="col">Receipt</th> <th scope="col">Time</th> <th scope="col">Store</th> <th scope="col">Cashier</th> <th scope="col">Customer</th> <th scope="col">Paid by</th> <th scope="col" class="r">Total</th> </tr> </thead> <tbody> <tr> <td data-label="Receipt"> <span class="mono">R-041185</span> </td> <td data-label="Time"> <span class="num">17:26</span> </td> <td data-label="Store">Market Street</td> <td data-label="Cashier">Mia Novak</td> <td data-label="Customer">Ethan Okoro</td> <td data-label="Paid by">Cash</td> <td data-label="Total" class="r">$34.23</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041184</span> </td> <td data-label="Time"> <span class="num">17:01</span> </td> <td data-label="Store">Riverside</td> <td data-label="Cashier">Ben Lopez</td> <td data-label="Customer">Noah Cohen</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$12.96</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041183</span> </td> <td data-label="Time"> <span class="num">16:36</span> </td> <td data-label="Store">Old Town</td> <td data-label="Cashier">Aisha Novak</td> <td data-label="Customer">Amara Brooks</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$3.78</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041182</span> </td> <td data-label="Time"> <span class="num">16:11</span> </td> <td data-label="Store">Market Street</td> <td data-label="Cashier">Leo Park</td> <td data-label="Customer">Grace Ivanova</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$55.23</td> </tr> </tbody> </table> </div>
It scrolls
Or it keeps its columns and scrolls sideways, from the keyboard too.
| Receipt | Time | Store | Cashier | Customer | Paid by | Total |
|---|---|---|---|---|---|---|
| R-041185 | 17:26 | Market Street | Mia Novak | Ethan Okoro | Cash | $34.23 |
| R-041184 | 17:01 | Riverside | Ben Lopez | Noah Cohen | Card | $12.96 |
| R-041183 | 16:36 | Old Town | Aisha Novak | Amara Brooks | Card | $3.78 |
| R-041182 | 16:11 | Market Street | Leo Park | Grace Ivanova | Card | $55.23 |
Show the code
<div class="table-wrap" data-allow-x data-scroller="Sales, scrolling"> <table class="table"> <caption class="sr-only">Sales, scrolling</caption> <thead> <tr> <th scope="col">Receipt</th> <th scope="col">Time</th> <th scope="col">Store</th> <th scope="col">Cashier</th> <th scope="col">Customer</th> <th scope="col">Paid by</th> <th scope="col" class="r">Total</th> </tr> </thead> <tbody> <tr> <td data-label="Receipt"> <span class="mono">R-041185</span> </td> <td data-label="Time"> <span class="num">17:26</span> </td> <td data-label="Store">Market Street</td> <td data-label="Cashier">Mia Novak</td> <td data-label="Customer">Ethan Okoro</td> <td data-label="Paid by">Cash</td> <td data-label="Total" class="r">$34.23</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041184</span> </td> <td data-label="Time"> <span class="num">17:01</span> </td> <td data-label="Store">Riverside</td> <td data-label="Cashier">Ben Lopez</td> <td data-label="Customer">Noah Cohen</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$12.96</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041183</span> </td> <td data-label="Time"> <span class="num">16:36</span> </td> <td data-label="Store">Old Town</td> <td data-label="Cashier">Aisha Novak</td> <td data-label="Customer">Amara Brooks</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$3.78</td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041182</span> </td> <td data-label="Time"> <span class="num">16:11</span> </td> <td data-label="Store">Market Street</td> <td data-label="Cashier">Leo Park</td> <td data-label="Customer">Grace Ivanova</td> <td data-label="Paid by">Card</td> <td data-label="Total" class="r">$55.23</td> </tr> </tbody> </table> </div>