Before diving into the blog, you might be wondering, "Did I just read CSS4 & CSS5?" Yes, you read that right. I'll provide more details about these at the end.
Whenever I come across a table design while building a web page, I'll quickly inform my designer/Client.
Please don't expect a good user experience in mobile view or in small device viewport size.
After a couple of years, One of my friends did a cool trick of completely removing default table styles on mobile by giving display: block to all the elements inside a table and then hiding the table header, and then creating a border for each table row and give it a fixed width or 100% width.
This is how the CSS will look like
Below is the table in desktop view (A regular generic table)
This is how you can expect the table to respond on mobile.
And this is how I've been handling table design in mobile view for the next 2 years.
On one fine day...
It was during late December of 2022, I was bored and was browsing for some New CSS updates and then I stumbled upon the CSS Day 2022 conference where @argyleink was presenting about a brand new concept in CSS called "Scroll Snaps".
It was a really awesome session, It just changed my view on CSS.
With scroll snaps, you can create snappable elements by using pure CSS. I started to use this feature in scenarios where I have a 3-column card layout and on mobile it will become a swipeable slider.
Here is how it will look
Desktop
Mobile
After some time in one of my projects where I got a table design to be built for a Section.
I was building the table with my usual style, Build a regular table on desktop view and then making all table properties to block and wrap each table row one below the other and stack them as bordered cards.
The same friend (who I've mentioned above) told me, "for now this is ok, but in the longer run I want to be able to make these cards as slider using a 3rd party plugin". This way, the table will be a slider in mobile and then a regular table in desktop.
When I heard this, I realized, "Oh wait, we can actually do that using scroll snaps without any extra JS plugin.
All you have to do in the code is the same as above, One extra step is you select the table body tag and then throw in the following properties.
And You'll need to add these to the table row <tr> tag.
Voila!
And that's how Responsive Card tables were born.
Here is my Codepen link to the same - Responsive Card Table.
Here is a screen recording demo of the same concept on a real-time project - Click Here
Reference Links
Learn more about scroll snaps here
As promised at the beginning, let's now delve into more details about CSS4 and CSS5.
CSS has evolved vastly in the last decade with lots of new features. Clubbing all those features together as CSS3 is cumbersome.
Some of the interested CSS developers came together to solve this problem. We have also have a community called "CSS4 Community Group"
CSS4 Community group has discussed for a while and came up with a solution by categorizing the Latest CSS features to CSS4, CSS5 & CSS6 based on various factors like year when feature was specced, browser support & More.
There is a Active Discussion going on in github where the CSS4 community group has requested for an RFC here. Do participate in this Discussion if you would like to share your view on this.
Top comments (2)
Great :)
Good one !