CSS class "zebra-table"

Example page for custom FAM Wiki table design zebra-table.
Used on the help article CSS classes.

.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i {
  border-collapse: collapse;
  margin: 1em 0;
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i):not(.zebra-table-nobo, .zbrt-nb) {
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--theme-border-color);
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) th {
  text-align: left;
  border-bottom: 1px solid var(--theme-border-color);
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr               :is(td,th) { padding:   2px 12px; }
:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr:first-of-type :is(td,th) { padding-top:    4px; }
:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr:last-of-type      td     { padding-bottom: 4px; }

:is(.zebra-table,        .zbrt  ) tr:nth-of-type(odd)  :is(td,th),
:is(.zebra-table-invert, .zbrt-i) tr:nth-of-type(even) :is(td,th),
:is(.zebra,        .zbr  )        tr:nth-of-type(odd)      td,
:is(.zebra-invert, .zbr-i)        tr:nth-of-type(even)     td     {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.05);
}

:is(.zebra-table,        .zbrt  ) tr:nth-of-type(even) :is(td,th),
:is(.zebra-table-invert, .zbrt-i) tr:nth-of-type(odd)  :is(td,th),
:is(.zebra,        .zbr  )        tr:nth-of-type(even)     td,
:is(.zebra-invert, .zbr-i)        tr:nth-of-type(odd)      td     {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.09);
}