Ironically, none of the example tables scroll on my iPhone (could be caused by the CodePen container to be fair).
Making Tables Responsive with Minimal CSS
21–30 of 39 posts
Re: Making Tables Responsive with Minimal CSS
#22[deleted]
Re: Making Tables Responsive with Minimal CSS
#23Ironically, none of the example tables scroll on my iPhone (could be caused by the CodePen container to be fair).
It’s the embedded codepen container. Going to codepen itself lets you scroll.
Re: Making Tables Responsive with Minimal CSS
#24I like the idea behind this article, but "Responsive Tables #2: Flexbox" really is a pretty good example of what _not_ to do. 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...
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.
Re: Making Tables Responsive with Minimal CSS
#25How 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.
you can use `position: sticky`[0] for that, but the last time I tried it table support was spotty. That was back in 2012 though, so I imagine that things have improved since then.
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/position
Re: Making Tables Responsive with Minimal CSS
#26Earlier 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.
Yes, not using tables is the best solution for mobile support.
But sometimes you can't do without. Then it's nice to know your options.
Re: Making Tables Responsive with Minimal CSS
#27I like the idea behind this article, but "Responsive Tables #2: Flexbox" really is a pretty good example of what _not_ to do. 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...
> PS: I would love to see Markdown formatting make it to HN comments one day...
Sadly, properly formatted comments don't bring paulg joy.
Re: Making Tables Responsive with Minimal CSS
#28My favorite part of this compared to Pylon tool on front page today:
"Why should I care to use table elements? Simply put: accessibility and proper semantics."
Accessibility for the win without extra workarounds.
Re: Making Tables Responsive with Minimal CSS
#29CSS 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. 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.
Re: Making Tables Responsive with Minimal CSS
#30CSS 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?