Responsive Tables in Pure CSS • Hacker News Board

Re: Responsive Tables in Pure CSS

#51

Post by spdustin » Mon, Apr 06, 2015, 8:34 PM UTC

I do this in my SharePoint responsive design classes. Students are taught how to make a custom table for a list view to include the data-attributes necessary to render field names at different breakpoints as well as data-attributes to set which breakpoints the fields should be visible. It's only one possible solution, as you've found (and others have mentioned), and I do show others (like overflow-x: scroll and such).

Data tables are hard in a corporate setting when mobile access is thrown in. It takes a lot of planning to determine the actual needs of users whose usage context puts them on a mobile phone or a tablet. Mobile in motion, and tablet on a couch. Oil rig operators may use a tablet to access production data, and so their tables would need larger targets for scrolling or toggling columns, and a larger/heavier font with higher contrast colors to be visible in harsh lighting conditions. Field sales reps may be using their phone while in the lobby before a sales meeting, and don't necessarily need just a subset of data.

Content may be king, but context is its queen.

Re: Responsive Tables in Pure CSS

#52

Post by 91bananas » Mon, Apr 06, 2015, 8:38 PM UTC

kolme wrote: post #33

JoshTriplett wrote: post #22

This seems like an impressive approach for data that uses a table for grouping but remains understandable when grouped linearly with duplicated labels. However, for tables showing genuinely tabular data, I'd almost always prefer to just see the original table and scroll horizontally, perhaps with appropriate heading columns or rows fixed so that they always display. Does anyone have appropriate CSS that produces an e…

Yes, it can be easily done with a combination of divs, fixed width and overflow-x: scroll. But I doubt one can do that with a table only, which is a shame, because it would lose markup semantic. Edit: Little PoC http://codepen.io/anon/pen/LEoyrK

Nearly every solution for this I have seen or implemented uses a combination of 2 divs with tables inside to work the scrolling. Tables just aren't built to do that well in my opinion.

Re: Responsive Tables in Pure CSS

#53

Post by tzm » Mon, Apr 06, 2015, 8:41 PM UTC

spdustin wrote: post #51

I do this in my SharePoint responsive design classes. Students are taught how to make a custom table for a list view to include the data-attributes necessary to render field names at different breakpoints as well as data-attributes to set which breakpoints the fields should be visible. It's only one possible solution, as you've found (and others have mentioned), and I do show others (like overflow-x: scroll and such)…

+1

Re: Responsive Tables in Pure CSS

#54

Post by snowwrestler » Mon, Apr 06, 2015, 8:44 PM UTC

ctingom wrote: post #38

There's an excellent plugin for WordPress called FooTable that works in conjunction with TablePress that does something similar.

FooTable has my favorite implementation of this idea. It still looks like a table, but with fewer columns. Each row gets a big [+] to expand down to show the "hidden" values with their column headers as key-value pairs.

The best part is that I can choose which columns "hide" in whatever order I want, for however many breakpoints I want.

Re: Responsive Tables in Pure CSS

#55

Post by JangoSteve » Mon, Apr 06, 2015, 9:08 PM UTC

wallawe wrote: post #13

at-fates-hands wrote: post #3

Chris 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.

Yup, though the different way to do it with data- attributes and no content in the stylesheet was also written about here [1] in 2012, and demo'd here [2] at the bottom of the page in the "No more tables" example.

We've been using this same technique in several projects where it seemed appropriate for the past few years and have been loving it.

[1] https://css-tricks.com/responsive-data-table-roundup/

[2] http://elvery.net/demo/responsive-tables/#no-more-tables

Re: Responsive Tables in Pure CSS

#56

Post by JangoSteve » Mon, Apr 06, 2015, 9:22 PM UTC

franciscop wrote: post #45

This solution is pure love! Any idea about the license? It doesn't appear to say anywhere and I would love to add it to Picnic CSS as a plugin (developer here).

They didn't publish any code that is non-trivial to implement (and all but 1 line of code is specific to their actual data and styling), so there wouldn't be any license to worry about. This technique has also been published before (http://elvery.net/demo/responsive-tables/#no-more-tables), so you're allowed to use the technique just as much as they are ;-)

Re: Responsive Tables in Pure CSS

#57

Post by acdha » Mon, Apr 06, 2015, 9:55 PM UTC

ahsteele wrote: post #40

The CSS Values and Units Module Level 3 details that the `attr()` function is at risk of being dropped during the CR period: http://dev.w3.org/csswg/css-values-3/#funcdef-attr .

Is that `attr()` at all or just the expanded version which allows different units and fallbacks?

https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browse... goes back far enough that I'd be surprised if they'd drop a feature which has been around for such a long period of time or that the browsers vendors would do anything other than ignore the spec until it was corrected.

Re: Responsive Tables in Pure CSS

#58

Post by wallawe » Mon, Apr 06, 2015, 9:58 PM UTC

JangoSteve wrote: post #55

wallawe wrote: post #13

Earlier quoted context omitted.

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.

Yup, though the different way to do it with data- attributes and no content in the stylesheet was also written about here [1] in 2012, and demo'd here [2] at the bottom of the page in the "No more tables" example. We've been using this same technique in several projects where it seemed appropriate for the past few years and have been loving it. [1] https://css-tricks.com/responsive-data-table-roundup/ [2] http://elve…

Yeah, I presumed I wasn't the first under the sun to do it; just thought it would be interesting to write about since some of my fellow front-enders hadn't seen the technique and google didn't turn up either of those links :)

Re: Responsive Tables in Pure CSS

#59

Post by fiatjaf » Mon, Apr 06, 2015, 10:06 PM UTC

sixQuarks wrote: post #36

Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't easily compare the figures in the columns against each other. The optimal solution, in my opinion, would be if you could specify a viewport width within a section of the site. The browser would then shrink that portion down and the user would see the full table,…

If you are using a phone you are probably not doing some heavy math with row comparisons.

Re: Responsive Tables in Pure CSS

#60

Post by teraflop » Mon, Apr 06, 2015, 10:43 PM UTC

fiatjaf wrote: post #59

sixQuarks wrote: post #36

Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't easily compare the figures in the columns against each other. The optimal solution, in my opinion, would be if you could specify a viewport width within a section of the site. The browser would then shrink that portion down and the user would see the full table,…

If you are using a phone you are probably not doing some heavy math with row comparisons.

It's not about "heavy math." On a small-screened device like a phone, information density is more important, not less. This change dramatically reduces the density, so you have to do much more scrolling to see the same amount of information.