One note: in demo 2, visibility: hidden will make screen readers ignore the headings.
Making Tables Responsive with Minimal CSS
31–39 of 39 posts
Re: Making Tables Responsive with Minimal CSS
#32CSS Grid to the rescue! First up, style for desktop so you know what the full table should look like. Then look at the table with your data in it. Try it on mobile and check the usability. Maybe there are supplemental columns that you have put in because you have the data but are not so important to the person on the move. In this scenario you can make it so that a click on a table entry brings up the whole record. T…
I'd love to see a codepen/jsfiddle/gist/whatever that builds out what you describe so it can be compared to the examples on the article?
If you want to give it a go then this is all you need to know to get started...
So your starting grid is on the table element - display: grid; grid-template-columns: (depends on your column data, start with '1fr auto auto auto...' with as many autos as you need for your data.
Then you need to add display:contents on thead, tbody and tr.
If you are using a caption then set that to grid-column: 1 / -1;
Your original grid-template-columns for the table can then be modified to suit your data, use 1fr to keep things the same width, 2fr if you want a double standard width column.
Then you will need to turn the grid-template-columns definition into a CSS variable, with your desktop layout in the fallback and the variable set by a media query for the responsive view.
Give it a go, once you have done it once you will wonder why you did it any other way.
There are other things you can do to make a sparse table with some cells taking up multiple rows or columns on an ad-hoc basis.
Really, once you have the display:contents trick working for you nicely there is nothing to write a codepen about!
Re: Making Tables Responsive with Minimal CSS
#33Earlier quoted context omitted.
The CodePen "Responsive Table 2.5" further builds on that example and tackles that exact problem you mention (by including the heading of what each cell represents)
If you're putting the heading in each cell, it kind of defeats the purpose of using a table to begin with, no? If I was so painted into a corner by mobile support and refused to make scrolling friendly (e.g., by pinning the left column), it sounds like just not using a table in the first place is a much better solution.
Inheriting this kind of functionality with just a little bit of CSS is pretty dang convenient though and a pretty sensible default, if nothing else.
Re: Making Tables Responsive with Minimal CSS
#34CSS Grid to the rescue! First up, style for desktop so you know what the full table should look like. Then look at the table with your data in it. Try it on mobile and check the usability. Maybe there are supplemental columns that you have put in because you have the data but are not so important to the person on the move. In this scenario you can make it so that a click on a table entry brings up the whole record. T…
I 2nd the request for jsfiddle / codepen for comparison. Not a css grid expert here - haven't had great luck with css grid responsive design without a bunch of media queries.
Re: Making Tables Responsive with Minimal CSS
#35CSS Grid to the rescue! First up, style for desktop so you know what the full table should look like. Then look at the table with your data in it. Try it on mobile and check the usability. Maybe there are supplemental columns that you have put in because you have the data but are not so important to the person on the move. In this scenario you can make it so that a click on a table entry brings up the whole record. T…
I 2nd the request for jsfiddle / codepen for comparison. Not a css grid expert here - haven't had great luck with css grid responsive design without a bunch of media queries.
Are you using variable size fonts? Or are you having to do the paint by numbers thing with a design handed down to you?
So much of CSS grid is challenging to the ways pages have been written. Try getting desktop to work and then using CSS variables defined in your media queries so you only have the one set of CSS rules, with just the bits that change in the media queries.
This way is much more succinct and you know what bits change as those are the bits with the variables in them.
I recommend that you just give it a go on tables, next time you need to. I think it just needs judicious use of display:contents on the header and rows for it to fall into place. That and the CSS variables approach should get you there and the problem can be solved in a two step process.
I would not dream of styling up a table or anything else that needs to be in rows/columns any other way, previous approaches have been too fragile for me.
Re: Making Tables Responsive with Minimal CSS
#36How do we still not have fixed column and row headers with horizontal and vertical scrolling? Almost every business website I've ever worked on wants it. Someone remakes it for every framework as soon as they come out.
LOL I've got the old ones covered https://github.com/kingkool68/stickyHeader
Re: Making Tables Responsive with Minimal CSS
#37Filament Group has Tablesaw which is another take on this idea. Javascript based but I think the results are a bit better https://www.filamentgroup.com/lab/tablesaw.html
Re: Making Tables Responsive with Minimal CSS
#38This site has many bite-sized but intriguing pieces like TFA. Kudos to the author for writing interesting things without any fluff!
Re: Making Tables Responsive with Minimal CSS
#39Earlier quoted context omitted.
You could move the data into a data attribute, and then use "content: attr(data-td)" for example.
Doesn't that take the problem back to the spot where we have the header repeated for each cell? In a data attribute instead of a span, which may be cleaner, but still: https://codepen.io/andrelaszlo/pen/xoxmdg Is there a way to only define the header label once and refer to them depending on the cell using only CSS?
you may use html template engine