chrsle
1
How can I get alternate row colors for dataview tables?
Things I have tried
CSS from this post which works great for normal tables in live preview, but not for Dataview tables (and also not for normal tables in preview mode.)
I searched but couldn’t find any CSS which would enable that.
Thank you!
Dataview brings it’s own style sheet, see here. You have to use the .table-view-table
class.
1 Like
Craig
3
This is the CSS I use to center and color all tables (including Dataview tables):
/*
* ========================================================
* PREVIEW MODE
* ========================================================
*/
/* Center tables on the page */
.markdown-preview-view table {
margin-left: auto;
margin-right: auto;
}
/* Color odd and even rows */
.markdown-preview-view th {
background-color: var(--background-secondary-alt);
}
.markdown-preview-view tr:nth-child(odd) {
background-color: var(--background-primary);
}
.markdown-preview-view tr:nth-child(even) {
background-color: var(--background-secondary);
}
/*
* ========================================================
* LIVE PREVIEW MODE
* ========================================================
*/
/* Center tables on the page */
.markdown-rendered table {
margin-left: auto;
margin-right: auto;
}
/* Color odd and even rows */
.markdown-rendered th {
background-color: var(--background-secondary-alt);
}
.markdown-rendered tr:nth-child(odd) {
background-color: var(--background-primary);
}
.markdown-rendered tr:nth-child(even) {
background-color: var(--background-secondary);
}
3 Likes
chrsle
4
Aaaaaah this is spectacular, thank you so much both!!
system
Closed
5
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.