5 ms·
There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article. The most elegant and least bandwidth consumin
by mmoez 7y ago
There 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/ 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"; }
...
- pmlnr 7y agoThat's really not ideal. That is putting hardcoded data in CSS.
- coda 7y agoYou could move the data into a data attribute, and then use "content: attr(data-td)" for example.
- andrelaszlo 7y agoDoesn'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 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?
- aabbcc1241 7y agoyou may use html template engine
- onion2k 7y agoThere'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?
- ballrock 7y agoImho, labels in the CSS are pretty tricky for i18n. The colors doesn't (generally), need traductions, they have the same meaning whatever the language. Data attributes in another hand, despite of being a bit redondant (in fact, it's not that insane in a loop ^^'), can be easily translated in HTML.
- mdarens 7y agocan 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.
- bradley_taunt 7y agoThanks for the additional option - I've updated the article to include that possibility as well
- mmoez 7y agoThank you for taking my suggestion into account.
- irrational 7y agoThat article was written in 2011. I would've hoped we would have a more elegant solution in the intervening years. Data tables are widespread, the need for responsive design is well-known, why is there not a general solution already baked into CSS?