Hi, I am wondering how I get a multi-row dataview table and change the layout of the table using CSS.
I have a note in which I specify different inputs. One of them is a project folder with these inputs:
projecttitle::
projectsub::
projectdeadline::
Now I want to have a dataview table to look something like this (including the styling with CSS). In the ‘deadline’ column cells should be merged over the ‘title’ and ‘subtitle’ row. I also would like to merge the cell of the title and subtitle, or at least remove the border between these cells.
So, I’m in a strange mood today, so sorry if this solution feels a little too playful/hackish/…
You say you want to merge the first column with the deadline, and then also merge the title/subtitle. Doesn’t that just equal one row where you insert a line shift before the subtitle? I’m going to treat it as such, since merging cells is a hassle with dataview.
One way to solve the remaining stuff is to use this query:
```dataview
TABLE WITHOUT ID
col1 as "**<span style='color: #b070b0;'>Deadline</span>**",
col2 as "**<span style='color: #b070b0;'>Project</span>**"
WHERE projecttitle
FLATTEN projectdeadline as projcol1
FLATTEN "_<span style='color: #b070b0;'>" + projecttitle + "</span>_<br>" + projectsub as projcol2
FLATTEN list(true, false) as alternateLine
FLATTEN choice(alternateLine, projcol1, "") as col1
FLATTEN choice(alternateLine, projcol2, "") as col2
```
The trick to this is simply to use <span style=' ... '> when building the various cell values, and an empty line will by default become a thin rows with background color. And then we use the FLATTEN list(true, false) to essentially double the lines, to allow us to style the lines between the “real” lines using choice().
Now if you want to start changing the background color, or make format decision on the entire cell that is a differernt matter, because then we would need to insert some anchors here and there to be able to target the various lines. But are we on the right way with this markup at all?
So, if one wants to style the table using a CSS snippet, for both live preview and reading mode, one could adapt the query to look like this:
```dataview
TABLE WITHOUT ID col1 as "Deadline", col2 as "Project #_"
WHERE projecttitle
FLATTEN projectdeadline as projcol1
FLATTEN "_<span class='title'>" + projecttitle + "</span>_<br>" + projectsub as projcol2
FLATTEN list(true, false) as alternateLine
FLATTEN choice(alternateLine, projcol1, "") as col1
FLATTEN choice(alternateLine, projcol2, "") as col2
```
And add a CSS file like the following:
a[href^="#_"] {
display: none;
}
body.theme-dark table:has([href^="#_"]) {
/* Define the colors I've used in this example */
--my-bg-header: var(--color-base-40);
--my-bg-rows: var(--color-base-20);
--my-border-color: #a0a0a0;
--my-title-color: #b070b0;
/* Some styling to be applied to the header row */
& thead > tr {
background-color: var(--color-base-40);
border: 1px solid var(--my-border-color);
& th {
color: var(--my-title-color);
border: 1px solid var(--my-border-color);
}
}
/* Hide the result counter, since we doubled the lines... */
& span.dataview.small-text {
display: none;
}
/* Styles the project title class */
& span.title {
color: var(--my-title-color);
}
/* resets the background-color to outside color */
& tr:nth-child(even) {
background-color: inherit;
}
/* Sets a background-color and border for the cells with text */
& tbody tr:nth-child(odd) td {
background-color: var(--color-base-20);
border: 1px solid var(--my-border-color);
}
}
Note that since we now use a CSS snippet to style, we can leave out some of the styling from within the query, and make that a little cleaner. I use one tag in the header, #_, to mark the entire table, and in addition since I was lazy and didn’t want to merge cells I used a <span class="title"> around the project title to target just that text.
Bonus tip: How to add a custom CSS snippet
Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.
