experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-zebra-striping
mode: provenance
representation: html
origin_response_id: 7fbb2d06dc2a744a46623c901a833dd3
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.587Z
version_nonce: d56756356ae47ecca4bb25a1be34541e
generated_at_utc: 2026-11-15T01:35:01.965Z
response_nonce: 4fad0b1372d5680da302a9fd4e78d533

Zebra Striping

102 of 125
You can achieve zebra striping through one simple attribute or CSS styling.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 373px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" zebra>
    <zg-data data='[
        {
          "playerName": "Eden Hazard",
          "playerClub": "Chelsea",
          "goalsScored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "playerClub": "Fulham",
          "goalsScored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "playerClub": "Manchester City",
          "goalsScored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "playerClub": "Manchester United",
          "goalsScored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "playerClub": "Liverpool",
          "goalsScored": 4   
        }
      ]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid 
      caption="EPL Top Scorers"
      layout="row"
      layout-controls="disabled"
      zebra>
      <zg-data 
        data='[
        {
          "playerName": "Eden Hazard",
          "playerClub": "Chelsea",
          "goalsScored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "playerClub": "Fulham",
          "goalsScored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "playerClub": "Manchester City",
          "goalsScored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "playerClub": "Manchester United",
          "goalsScored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "playerClub": "Liverpool",
          "goalsScored": 4   
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery