HTML/CSS. How do I stylize TD based on column data type

user_3132596 0
Viewed 132

I have an ordinary table/th/tr/td block on a web page that displays tabular data. Data columns may be reordered:

product|price|date
price|product|date
date|product|price

... e.t.c

but the same order for a single render:

Microsoft|100|01-01-2020
Google|200|02-02-2019

or

100|Microsoft|01-01-2020
200|Google|02-02-2019

I have to stylize product/price/date columns in a table (for instance: "product" is bold, and "date" is italic). Finally, it looks ugly:

<td style="font-weight: bold">Microsoft</td> ...

When I render table/th/tr/td I know what data is in every column. May I use CSS to solve my task without applying styles/classes directly to every single cell?

Thank you in advance!

css html
3 Answers
user_19783110

You can use the JS to decide weather to apply styles to which data cell.

Like:

You could have predefined set of css classes in array and then inject where required. This is useful for dynamic data in s.

user_101930180

You can assign an specific class to your cell for example for name cells ->n , for date-> cells d and so on then with css you can style according to that class for example if you want to bold all names do like this:

.n{
    font-weight:bold
  }
user_92665560
Related