Hacker News Reader

Comment by mmoez | Hacker News Reader

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/ 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"; }
   ...

View on HN

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?

you may use html template engine

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.

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?

Imho, 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.

Thanks for the additional option - I've updated the article to include that possibility as well

Thank you for taking my suggestion into account.

That 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?

Reply on news.ycombinator.com