Style a responsive table with alternating row colors and hover effects

by stitot

HTML

<div class="hcg-container">
  <table>
    <thead>
      <tr>
        <th>Header A</th>
        <th>Header B</th>
        <th>Header C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>R1C1</td>
        <td>R1C2</td>
        <td>R1C3</td>
      </tr>
      <tr>
        <td>R2C1</td>
        <td>R2C2</td>
        <td>R2C3</td>
      </tr>
      <tr>
        <td>R3C1</td>
        <td>R3C2</td>
        <td>R3C3</td>
      </tr>
      <tr>
        <td>R4C1</td>
        <td>R4C2</td>
        <td>R4C3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.hcg-container {
    --ig-row-even-background: blue;
    --ig-percent: 95%;
    --ig-color-mix-2: white;

    --ig-row-hover-background: red;
}


.hcg-container table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.hcg-container table th,
.hcg-container table td {
  padding: 0.75rem;
  border: 1px solid #000;
}

.hcg-container table thead th {
  text-align: left;
  font-weight: 600;
}

.hcg-container table tbody tr:nth-child(even) {
  background: color-mix(
    in oklab,
    var(--ig-row-even-background)
      calc(100% - var(--ig-percent, 0%)),
      var(--ig-color-mix-2)
      var(--ig-percent, 0%)
  );
}

.hcg-container table tbody tr:hover {
  background: color-mix(
    in oklab,
      var(--ig-row-hover-background)
      calc(100% - var(--ig-percent, 0%)),
      var(--ig-color-mix-2)
      var(--ig-percent, 0%)
  );
}