Showing data in tables inside HTML keeps the data clean and organized. It also provides a great user experience. But non-responsive tables can create a bad user experience where the table columns mesh or worse don't display legible data. Thanks to Chris Ferdinandi from GoMakeThings, today I learned how to create responsive tables that on narrow viewports adapt two different views:
Here's a demo of the Horizontal 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 | January 31st, 2025 |
| Codepen | Click here |