Build Stunning Responsive Card Tables with CSS4 & CSS5
Tags: responsivetable, tableformobileview, css4, css5
Published: 2024-06-12 06:58:34

---
title: Build Stunning Responsive Card Tables with CSS4 & CSS5
published: true
description: Tired of squished tables or endless scrolling in mobile view? Fear no more! Discover a table that behaves like a standard table on desktop and transforms into swipeable cards on mobile. Say goodbye to frustrating layouts and hello to a seamless, responsive design.
tags: responsivetable, tableformobileview, css4, css5, 
# cover_image: ![coding background image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elgndzsmkmevc2iaz18k.jpg)
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-10 04:38 +0000
---
>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.

<hr />

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

![Code block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tcmx8rp469cwdbfeyr2.png)

![Code block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rld4ugldh94noz1d0pjx.png)

Below is the table in desktop view (A regular generic table)

![Table generated from above code block's effect on desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt7nxpkxylun5gfk8ksy.png)

This is how you can expect the table to respond on mobile.

![Table generated from above code block's effect on mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jl0c57bjpabxczwpudv.png)

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
![Table generated from above code block's effect on desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7xqbf5oy7kbvcgscu83.png)

#####Mobile
![Table generated from above code block's effect on mobile - using scroll snaps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcd0xm0593h030n3d4cy.gif)

######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.


![Light bulb moment gif image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiptygb5ofh6bvylc2e1.png)


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.

![Code block with scroll snap property on parent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w5fqtk2zd4ing9kjydm.png)

And You'll need to add these to the table row `<tr>` tag.

![Code block with scroll snap property on child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8jywpmoazanhwm1kqr5.png)
>Voila!
![gif representing scrolling card table for mobile view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhc6ntbyungdfygj1b4n.gif)

![voila gif image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzw92fyy3a0yi5ie9gaa.gif)

>And that's how Responsive Card tables were born.

Here is my Codepen link to the same - <a href="https://codepen.io/subu/pen/GRzaoeE?editors=1100" target="_blank">Responsive Card Table.</a>

Here is a screen recording demo of the same concept on a real-time project - [Click Here](https://www.loom.com/share/c58ca8b8f53545e58c8d8984058568a9?sid=5be442aa-2b1d-41e1-9ba6-11387d166636)

####Reference Links
Learn more about scroll snaps [here](https://www.youtube.com/watch?v=34zcWFLCDIc)

<hr />

###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](https://www.w3.org/community/css4/) 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](https://github.com/CSS-Next/css-next/discussions/92). Do participate in this Discussion if you would like to share your view on this.