This is option 2 of the Responsive Table design. Option 1 is listed here. In Option # 2, instead of having a horizontal scroll in the table, we build a virtual stack of the rows. This table has a lot of flexibility built in to include n number of rows and columns. Thanks to Chris Ferdinandi from GoMakeThings. for converting the JS into a Web Component.
Here's a demo of the Vertical Scroll Responsive Table. Reduce the width of the browser window to see the table in action.
First Name | Last Name | Movie | Country | Oscar Nominee | IsDeceased |
---|---|---|---|---|---|
Irrfan | Khan | The LunchBox | India | Yes | True |
Heath | Ledger | The Dark Knight | United States of America | Yes | True |
Matthew | McConaughey | Interstellar | United States of America | Yes | False |
Shahrukh | Khan | Swades - We the People | India | No | False |
Category | HTML / JS / CSS |
Credits | Chris Ferdinandi |
Date | February 1st, 2025 |
Codepen | Click here |