TL;DR

The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.

In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

For the impatient, look at the following pen for a prototypical implementation.

A Little History of Responsive HTML Tables

Responsive tables aren’t a new topic, and there are many solutions that have already been proposed.

Shingo Nakayama

Full stack engineer, based in Tokyo. Currently trying to add AI into the mix.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store