Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Responsive Tables in Pure CSS

techblog.livingsocial.com

Post reply on HN
Print view View original

61–70 of 74 posts

Re: Responsive Tables in Pure CSS

#61

Post by harlanlewis »

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.

Add it to the list: if you are using a phone you are probably not... shopping, changing settings, signing up, using all the features, comparing products, reading longform, watching a movie, trying to do your job...

Re: Responsive Tables in Pure CSS

#62

Post by joesb »

usaphp wrote: post #35
some1else wrote: post #34

This indeed transforms information about a group of records from a tabular spreadsheet into individual card representations. The people who are pointing out that this solution isn't "a more powerful responsive label scrolling spreadsheet" are right, but they're likely only after a faster horse. As an aside, a table can have multiple tbodies according to HTML specs, so there's no need to use CSS generated elements to…

So if you have say 100+ records in a table you will end up with 100+ extra and tags? Just to style it for mobile? I don't think its a good solution

The same can be said about adding anything to repeated items.

Re: Responsive Tables in Pure CSS

#63

Post by UUMMUU »

Domenic_S wrote: post #26
freshyill wrote: post #18

Earlier quoted context omitted.

Why add JS if it isn't necessary?

That's a pretty trite response. I can think of a few reasons: 1) Maintainability. JS is probably easier to grok in some circumstances, ie. you don't have to send new devs to a blog post to explain the CSS on your project. 2) Cost/benefit analysis of dev time, ie. you could do X (where X is some minor display that 1% of your users see) in pure CSS in 12 hours, or do the same in 30 min of JS. 3) Cost/benefit analysis o…

Well the thing is, none of your reasons are applicable here. He has a valid question as to why you would need JS as this is purely a styling between mobile and desktop. The only thing you could potentially do with JS would be to strip the content and rerender it which would be very strongly tied to the HTML structure. Once again, your points are valid, mostly, but for this particular problem, you wouldn't need or even want to do it via JS. I think that's the solution to the original question.

Re: Responsive Tables in Pure CSS

#66

Post by danneu »

usaphp wrote: post #35
some1else wrote: post #34

This indeed transforms information about a group of records from a tabular spreadsheet into individual card representations. The people who are pointing out that this solution isn't "a more powerful responsive label scrolling spreadsheet" are right, but they're likely only after a faster horse. As an aside, a table can have multiple tbodies according to HTML specs, so there's no need to use CSS generated elements to…

So if you have say 100+ records in a table you will end up with 100+ extra and tags? Just to style it for mobile? I don't think its a good solution

Yet gzips into just 100 more bytes.

Re: Responsive Tables in Pure CSS

#67

Post by Silhouette »

91bananas wrote: post #52
kolme wrote: post #33

Earlier quoted context omitted.

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.

Nearly every solution for this I have seen or implemented uses a combination of 2 divs with tables inside to work the scrolling.

Yes, we use a variation of that theme as well.

It works to a useful degree, as long as you have enough control over the dimensions that you don't wind up with the row heights differing between the row headers table and the data rows table.

Of course the mark-up is semantically poor, but then HTML's enforced columns-inside-rows nesting for tables is already horrible to work with if you want to show a data record per column and use the row labels for the fields rather than vice versa, making any sort of templating system fragile as well. Rather like floats, this is one of those areas where no amount of CSS tweaks can now make up for underlying weaknesses in the spec of HTML itself.

Tables just aren't built to do that well in my opinion.

We could do better than what we have, though. Hopefully we will before too long, if position:sticky becomes standardised, complete with the notes about making it work properly in a tabular context where some other positioning explicitly isn't required to.

I'm not sure how effectively we'll be able to write a comprehensive polyfill without resorting to JS, so maybe we'll have to settle for gracefully degrading to having the entire table scroll without locking the row headers in place. At least the table mark-up will be more sensible than having two completely separate table elements with some sort of wrapper(s).

Re: Responsive Tables in Pure CSS

#68

Post by JangoSteve »

wallawe wrote: post #58
JangoSteve wrote: post #55

Earlier quoted context omitted.

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 :)

And those links weren't very descriptive and didn't fully explain the technique, so definitely helps to add to the ecosystem.

Re: Responsive Tables in Pure CSS

#69

Post by BorisMelnik »

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,…

agree. I would rather pinch zoom so I can compare rows / tables than flip through a bunch of "cards." Must be a Microsoft thing.

Re: Responsive Tables in Pure CSS

#70

Post by bgarbiak »

It's not "pure CSS" if it's using data-attributes. It's CSS and HTML. With an access to both of these it's a trivial job. It would be sensational if someone would find a solution for that without using the latter (or JS, or server side processing) - for example: for the user generated content.

My joke-solution (working only for fixed amount of rows, with fixed dimensions): multiplying the headers for each row with text-shadow.

Post reply on HN