Adaptive table (how to create an adaptive Table using CSS – example)

Every web developer sooner or later encounters the question of adapting tables for tablets and mobile devices. Indeed, it can be a real challenge, as table layout was not originally designed for such purposes. In the times when it was frequently used, no one could imagine that adaptation technologies would progress so far. However, we cannot completely abandon table-based layouts, as they still find their place on websites, especially in online stores. Typically, they are used for displaying order lists or product specifications. Why is that so? Well, it’s because such tables cannot be easily replaced with div elements and loops, as the backend engine may output these parameters in a loop. But then arises the question of how to make an adaptive table and avoid adding classes to all tables? There is a solution. So, let’s get started.

To begin with, you can download and see how an adaptive table works.

 Download – Demo

Explaining it in detail and boringly, I don’t see the point. Essentially, all you need to do is add styles:

In my version, I completely hide the table header and its names since I don’t need them. In the archive, you can see how to keep them visible; they are styled using the “before” property. And that’s all for creating an adaptive table. If you have any questions, I’m always happy to help.

2 Styling method for tables on mobile devices – introducing a horizontal scroll for scrolling.

Add the following code to your CSS file: