Striped Rows

<div class="nuda-tbl-striped">
  <table class="nuda-tbl-striped__table">
    <thead>
      <tr>
        <th class="nuda-tbl-striped__th">Name</th>
        <th class="nuda-tbl-striped__th">Role</th>
        <th class="nuda-tbl-striped__th">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nuda-tbl-striped__row">
        <td class="nuda-tbl-striped__td">Alex Kim</td>
        <td class="nuda-tbl-striped__td">Engineer</td>
        <td class="nuda-tbl-striped__td">Active</td>
      </tr>
      <tr class="nuda-tbl-striped__row">
        <td class="nuda-tbl-striped__td">Priya S.</td>
        <td class="nuda-tbl-striped__td">Designer</td>
        <td class="nuda-tbl-striped__td">Active</td>
      </tr>
      <tr class="nuda-tbl-striped__row">
        <td class="nuda-tbl-striped__td">Jordan T.</td>
        <td class="nuda-tbl-striped__td">PM</td>
        <td class="nuda-tbl-striped__td">Away</td>
      </tr>
      <tr class="nuda-tbl-striped__row">
        <td class="nuda-tbl-striped__td">Sam L.</td>
        <td class="nuda-tbl-striped__td">QA</td>
        <td class="nuda-tbl-striped__td">Active</td>
      </tr>
    </tbody>
  </table>
</div>

.nuda-tbl-striped {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: #141414;
  animation: _nuda-tblfade .4s ease-out;
}

.nuda-tbl-striped__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.nuda-tbl-striped__th {
  padding: .5rem .75rem;
  text-align: left;
  color: #777;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #1a1a1a;
}

.nuda-tbl-striped__td {
  padding: .45rem .75rem;
  color: #cfcfcf;
}

.nuda-tbl-striped__row:nth-child(odd) {
  background: #1a1a1a;
}

.nuda-tbl-striped__row:nth-child(even) {
  background: #141414;
}

@keyframes _nuda-tblfade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-tbl-striped {
    animation: none;
  }
}