Styling a single table

Things I have tried

What I’m trying to do

Hi! I would like to style a single table in a post. The table is generated by dataview. I know I can apply a css class to the whole note but I just want this single table to look different. Is there any way to add a css class to a specific table?

take a look at German Dictionary - inline Dataview
which covers the same concept to a degree. in this case it calls out by the Yaml and affects all tables in the page.

1 Like

You could use nth-of-type (along with a class added to the note) to target the table. This is obviously hacky and fragile — you may need to update the style if the number of tables in the note changes.

You could also just write that table in HTML and add a class directly to it.

Using HTML tables is a great idea if the tables are static. I wonder if there is a way to add a class tag to a table generated from dataview.

There’s a way to do that, but you need to use the javascript side: using DVJS instead of DQL. You need to use the dv.view() method: Codeblock Reference - Dataview.
I only tried it once, so I have no great experience to give you the right instructions.

Thanks! I also tried dv.view() already. It supports to specify a css file, but it will be applied to the whole note.

I found a different solution. dv.container gives you access to the container HTML element of the current code block. You can modify the class list of it like this:

dv.table(["period"], dv.pages("#job").map(b => [b.period]))
1 Like

I didn’t noticed that dv.view() method is applied to the whole note.
About the dv.container, in fact I already see it somewhere but never tried…

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.