Responsive tables using Grids - Post...
Let's say the table has 10 rows of 8 columns at its maximum view.
In the medium view, I'd like to only show the first 5 columns.
In the small view, only the first 3 columns.
I was planning on using css grid to lay up the data, however I'm not sure that this behaviour is possible using this method.
Any idea or tips?
First column would contain a 3-column grid for the first three columns, second one would have the next two columns and the third one would contain the last 3 columns. Can the grouping columns be switched off at breakpoints, along with the data that would be in them?
I ended up with a container with 3 grid columns at the lowest breakpoint and additional columns at higher breakpoints. I added a container into each of these grid columns with a different class selector for each breakpoint setting and then set display:none for the upper container classes at lower breakpoint settings.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.