Making Tables Responsive with Minimal CSS
bradleytaunt.com
Making Tables Responsive with Minimal CSS
1–10 of 39 posts
Re: Making Tables Responsive with Minimal CSS
#2There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article.
The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors:
td:nth-of-type(1):before { content: "Type of Food"; }
td:nth-of-type(2):before { content: "Calories"; }
td:nth-of-type(3):before { content: "Tasty Factor"; }
...Re: Making Tables Responsive with Minimal CSS
#3There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors: td:nth-of-type(1):before { content: "Type of Food"; } td:nth-of-type(2):before { content: "Calories"; } td:nth-of-type(3):before { content: "Tasty Factor"; } ...
That's really not ideal. That is putting hardcoded data in CSS.
Re: Making Tables Responsive with Minimal CSS
#4There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors: td:nth-of-type(1):before { content: "Type of Food"; } td:nth-of-type(2):before { content: "Calories"; } td:nth-of-type(3):before { content: "Tasty Factor"; } ...
Thanks for the additional option - I've updated the article to include that possibility as well
Re: Making Tables Responsive with Minimal CSS
#5There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors: td:nth-of-type(1):before { content: "Type of Food"; } td:nth-of-type(2):before { content: "Calories"; } td:nth-of-type(3):before { content: "Tasty Factor"; } ...
That's really not ideal. That is putting hardcoded data in CSS.
You could move the data into a data attribute, and then use "content: attr(data-td)" for example.
Re: Making Tables Responsive with Minimal CSS
#6I like the idea behind this article, but "Responsive Tables #2: Flexbox" really is a pretty good example of what _not_ to do.
Just hiding the table header definitely does not work - this is how I first "read" the data:
- Slice of Pizza = 450
- 95% = $5.00
- Common = 8/10
And this clearly doesn't make any sense at all.
PS: I would love to see Markdown formatting make it to HN comments one day...
Re: Making Tables Responsive with Minimal CSS
#7Earlier quoted context omitted.
That's really not ideal. That is putting hardcoded data in CSS.
You could move the data into a data attribute, and then use "content: attr(data-td)" for example.
Doesn't that take the problem back to the spot where we have the header repeated for each cell? In a data attribute instead of a span, which may be cleaner, but still:
https://codepen.io/andrelaszlo/pen/xoxmdg
Is there a way to only define the header label once and refer to them depending on the cell using only CSS?
Re: Making Tables Responsive with Minimal CSS
#8There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors: td:nth-of-type(1):before { content: "Type of Food"; } td:nth-of-type(2):before { content: "Calories"; } td:nth-of-type(3):before { content: "Tasty Factor"; } ...
That's really not ideal. That is putting hardcoded data in CSS.
There's a ton of information in the CSS already - anything that uses color to denote meaning, or the layout of a component, or the order of items in a flex list, and so on. That's all data in a page's information hierarchy. Plus, the content attribute of the ::before and ::after pseudoelements literally exists for injecting content in to a page using CSS. Why not use it?
Re: Making Tables Responsive with Minimal CSS
#9There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consuming one is described in https://css-tricks.com/responsive-data-tables/ and uses modern CSS selectors: td:nth-of-type(1):before { content: "Type of Food"; } td:nth-of-type(2):before { content: "Calories"; } td:nth-of-type(3):before { content: "Tasty Factor"; } ...
That's really not ideal. That is putting hardcoded data in CSS.
can be circumvented by binding the header row & the styles to the same data, but gets complicated when you have cells in the header or body which span rows or columns, or have row-scoped headers.
Re: Making Tables Responsive with Minimal CSS
#10I like the idea behind this article, but "Responsive Tables #2: Flexbox" really is a pretty good example of what _not_ to do. Just hiding the table header definitely does not work - this is how I first "read" the data: - Slice of Pizza = 450 - 95% = $5.00 - Common = 8/10 And this clearly doesn't make any sense at all. PS: I would love to see Markdown formatting make it to HN comments one day...
The CodePen "Responsive Table 2.5" further builds on that example and tackles that exact problem you mention (by including the heading of what each cell represents)