To see mobile state, resize screen to under 600px. Use toggle icons to view all row data.
This is my common solution to displaying table data with large column counts on mobile. The entire table is visible at large screen widths. On mobile, only the first row is displayed with a toggle icon. When the user expands the row, they can see all row data vertically with the column name from the data-th attribute used for a label.
| Song | Final | Acoustic | Date | Comments |
|---|---|---|---|---|
| Begin the Begin | 🎸 | Yes | 12/19/21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Cursus turpis massa tincidunt dui ut ornare lectus. Potenti nullam ac tortor vitae purus faucibus ornare. Ut porttitor leo a diam sollicitudin tempor id. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Posuere urna nec tincidunt praesent semper feugiat. |
| Turn You Inside-Out | 🎸 | No | 12/14/21 | Feugiat in ante metus dictum at. Ultrices neque ornare aenean euismod elementum nisi. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Pellentesque habitant morbi tristique senectus. Ridiculus mus mauris vitae ultricies leo integer malesuada. In fermentum posuere urna nec. Consequat interdum varius sit amet mattis. Et sollicitudin ac orci phasellus egestas. A iaculis at erat pellentesque. |
| Carnival of Sorts (Boxcar) | 🎸 | Maybe | 11/18/21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Cursus turpis massa tincidunt dui ut ornare lectus. Potenti nullam ac tortor vitae purus faucibus ornare. Ut porttitor leo a diam sollicitudin tempor id. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Posuere urna nec tincidunt praesent semper feugiat. |
| Sweetness Follows | 🎸 | So | 11/12/21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Cursus turpis massa tincidunt dui ut ornare lectus. Potenti nullam ac tortor vitae purus faucibus ornare. Ut porttitor leo a diam sollicitudin tempor id. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Posuere urna nec tincidunt praesent semper feugiat. |