Responsive tables using Grids

User 53435 Photo


Registered User
79 posts

I'm converting an older unresponsive site to replace a data table with a more responsive view.

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?

Thanks,
Geoff
User 53435 Photo


Registered User
79 posts

I haven't tried this yet, but perhaps I could create three 'grouping' grid columns in a container and each of these columns could contain a grid with the columns required to be shown at each breakpoint.
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?
User 244626 Photo


Registered User
811 posts

You might investigate the new visibility setting under layout tools. I can create a 3 column grid at the lower breakpoints and then add more columns at upper breakpoints in the grid editor. I can then either set display to "none" or choose to set the visibility to "hidden" of any of the columns which may be what you want ?
Bootstrap 5 CSS Grid.
User 53435 Photo


Registered User
79 posts

Thanks! That works fine.
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.