Making Tables Responsive with Minimal CSS
bradleytaunt.com
bradleytaunt.com
Just hiding the table header definitely does not work - this is how I first "read" the data:
- Slice of Pizza = 450
- 95% = $5.00
- Common = 8/10
And this clearly doesn't make any sense at all.
PS: I would love to see Markdown formatting make it to HN comments one day...
But sometimes you can't do without. Then it's nice to know your options.
Sadly, properly formatted comments don't bring paulg joy.
The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors:
td:nth-of-type(1):before { content: "Type of Food"; }
td:nth-of-type(2):before { content: "Calories"; }
td:nth-of-type(3):before { content: "Tasty Factor"; }
...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?
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/position
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. This could be on a separate page or in a pop-up. Again, depending on the data and the intended audience this has to be worked out by a little bit of prototyping. In the mix are font sizes and options to all 'and'hellip; to selected wide cells that can be abbreviated.
Now the fun begins in creating the responsive layout.
For the grid definitions - grid-column-rows - the desktop layout can be replaced with a CSS variable. In the CSS variable a fallback of the desktop definition can be given. This should be there already. For the variable definition that goes in a media query. This media query can be set to the max-width that best suits the data, if the table looks good down to 40 ems then the media query can be for that and below.
This approach makes it easier for the next guy that comes along. They will only have to know CSS Grid and not any of the Byzantine methods of page layout that came before CSS Grid.
This should degrade gracefully to a stock table for anyone with an extremely old browser.
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!
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.
Accessibility for the win without extra workarounds.
Often we want a completely different layout for mobile, and to focus on different data. Shoehorning the same markup for both cases just makes it harder to work with.