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

31–40 of 74 posts

Re: Responsive Tables in Pure CSS

#33

Post by kolme »

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

Re: Responsive Tables in Pure CSS

#34

Post by some1else »

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 achieve the card styling in the demo. Just wrap each record into a tbody and style that.

Re: Responsive Tables in Pure CSS

#35

Post by usaphp »

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

Re: Responsive Tables in Pure CSS

#36

Post by sixQuarks »

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, shrunk down to the width of the browser. The user can then magnify that area to see the data better.

Not sure if I'm making sense here. Also, I don't think this is technically possible right now.

Re: Responsive Tables in Pure CSS

#37

Post by bradbatt »

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

Totally agree. Why not get rid of some of the extraneous information in the table first? You don’t need MM/DD/YYYY format for every date. You don’t even need the year if you are displaying information for this year, which is probably the most likely in a payments table.

So instead of “02/01/2015" and “01/01/2015 - 01/31/2015” use “2/1” and “1/1-31” … or even “Feb 1” and ”Jan 1-31”.

I assume that under payments they would normally have some other description other than “Payment #1”, “Payment 2”, etc. - otherwise that is a waste of space as well.

Post reply on HN