Responsive Tables in Pure CSS
techblog.livingsocial.com
Responsive Tables in Pure CSS
1–10 of 74 posts
Re: Responsive Tables in Pure CSS
#2Interesting! The author should consider using the ISO 8601 recommended date format though (`%F` in `date`). It doesn't completely remove the ambiguity, but the standardization helps to avoid it.
Re: Responsive Tables in Pure CSS
#3Chris Coyier - 4 years ago.
He did this and added some reader submissions on other approaches.
Re: Responsive Tables in Pure CSS
#4This 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!
Re: Responsive Tables in Pure CSS
#5I like the first table better.
Re: Responsive Tables in Pure CSS
#6I used this technique on a project recently and in the end, we collectively determined that we didnt really even need the labels if the column info was thoughtout enough. So my advice is, make sure you need the labels before you automatically take this route. Order #, Item, Price type stuff can be pretty self-explanatory.
Re: Responsive Tables in Pure CSS
#7Our 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 user doesn't know to scroll. What we did to help with this is put a shadow on the edges in the directions you can scroll.
Re: Responsive Tables in Pure CSS
#8The article doesn't explain all tricks they use. A media query is used to apply the stylesheet selectively to small window sizes. That stylesheet splits the table into multiple ones.
The original table's border is removed, and every tr is styled to look like a table by giving it a border. tds are turned into rows by setting display:block. The td rows are given row headers using pseudo elements, which pulls their content from an attribute on the corresponding td.
Re: Responsive Tables in Pure CSS
#9This 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?
Re: Responsive Tables in Pure CSS
#10Chris Coyier - 4 years ago. He did this and added some reader submissions on other approaches. https://css-tricks.com/responsive-data-tables/
Coyier is always on top of things. His demos have saved me many times.