Interesting read, but why no JS? Don't all mobile devices play well with JS? Is it a file size issue?
Responsive Tables in Pure CSS
11–20 of 74 posts
Re: Responsive Tables in Pure CSS
#12This is a great approach for when you have complete control over your markup. If it's user-generated (like a table in the body of a post in a CMS, for example), it gets trickier. I have a tiny jQuery plugin to stick a span inside a cell to form the heading at small sizes, but I like the data-attribute approach better. I think I'll change my plugin to do it this way now. Related: Hey Travis and Will, nice work on this…
Hiya! What's your jQuery plugin?
Right here. Like I said, it's super basic. https://github.com/freshyill/Responsive-Table-Helper
Re: Responsive Tables in Pure CSS
#13Chris Coyier - 4 years ago. He did this and added some reader submissions on other approaches. https://css-tricks.com/responsive-data-tables/
I linked to that post in the in the article and mentioned the reasons it was slightly different but built upon that idea. He throws his content in the stylesheets.
Re: Responsive Tables in Pure CSS
#14A media query? Dang Living Social tearing up the engineering scene over here.
Re: Responsive Tables in Pure CSS
#15First a disclaimer: I am a programmer, not a designer or UX specialist.
When I make a responsive table I feel like turning every column into a distinct row makes it more difficult to navigate; instead I prefer to split the columns into groups and wrap them with alternate coloring. So if there are 5 columns maybe 3 go in the top of the row and 2 go in the bottom of the row (top and bottom sharing the same background color).
Is this kind of cols-to-rows substitution more user-friendly?
Re: Responsive Tables in Pure CSS
#16Our users never seem to like this approach. It does not work very well at all with complex tables (colspans, rowspans), sorting and filtering feels funky if you don't know it's a table from the start and it's insanely repetitive. Most of the time we end up wrapping the `table` in a div with `overflow: auto` and then they can scroll around the table. The only issue is when a column ends at the edge of the screen so a…
It's definitely not for every scenario. It will depend on your data, whether or not you need sorting as you mentioned, and how many total rows there are in the table (card effect becomes too much after 20 or so). However for this simple use case, we thought it the best way to go.
Re: Responsive Tables in Pure CSS
#17Very similar to jQuery Mobile reflow table (uses some JS)
https://api.jquerymobile.com/table-reflow/
A while ago, I css-ed a table into a list for small displays, because lists seem "natural" to me on mobile than any crammed table. Not perfect but been using it ever since:
Re: Responsive Tables in Pure CSS
#18Interesting read, but why no JS? Don't all mobile devices play well with JS? Is it a file size issue?
Why add JS if it isn't necessary?
Re: Responsive Tables in Pure CSS
#19A media query? Dang Living Social tearing up the engineering scene over here.
I think I fault more whoever is voting this into the #1 current story on HN.
Re: Responsive Tables in Pure CSS
#20Our users never seem to like this approach. It does not work very well at all with complex tables (colspans, rowspans), sorting and filtering feels funky if you don't know it's a table from the start and it's insanely repetitive. Most of the time we end up wrapping the `table` in a div with `overflow: auto` and then they can scroll around the table. The only issue is when a column ends at the edge of the screen so a…
It's definitely not for every scenario. It will depend on your data, whether or not you need sorting as you mentioned, and how many total rows there are in the table (card effect becomes too much after 20 or so). However for this simple use case, we thought it the best way to go.
Absolutely agreed. It works great for this situation.