How to: Dataview table alternate colors

[chrsle]

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!

[alltagsverstand]

Dataview brings it’s own style sheet, see here. You have to use the .table-view-table class.

[Craig]

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);
}

[chrsle]

Aaaaaah this is spectacular, thank you so much both!!