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
Responsive tables using Grids - Post...
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?
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?
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.
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.
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.