Responsive Table - Vertical Table

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

File Info

Category HTML / JS / CSS
Credits Chris Ferdinandi
Date February 1st, 2025
Codepen Click here