features
Menu
Menu

Zebra Striping

ZingGrid has default behaviors for displaying zebra striping. You can achieve this through one simple attribute or CSS styling.

On This Page

Zebra Attribute

Display default striping by adding the zebra attribute to the <zing-grid> tag.
CloseCopy Copied
<zing-grid zebra></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Multiple Colors

Add multiple colors by passing a comma separated list to the zebra attribute.
CloseCopy Copied
<zing-grid zebra="red, orange, yellow"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Variables

Add zebra striping with CSS variables (only two colors).
CloseCopy Copied
:root {
  /* even/odd styling */
  --zg-row-body-background_odd:#ef9a9a;
  --zg-row-body-background_even:#fff59d;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Selectors

Add zebra striping with CSS selectors.
CloseCopy Copied
/* even/odd styling */
zg-body zg-row:nth-child(odd){
  background:#ef9a9a;
}
zg-body zg-row:nth-child(even) {
  background:#fff59d;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading