<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Knocky</th>
      <th>Flor</th>
      <th>Ella</th>
      <th>Juan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Breed</td>
      <td>Jack Russell</td>
      <td>Poodle</td>
      <td>Streetdog</td>
      <td>Cocker Spaniel</td>
    </tr>
    <tr>
      <td>Age</td>
      <td>16</td>
      <td>9</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Owner</td>
      <td>Mother-in-law</td>
      <td>Me</td>
      <td>Me</td>
      <td>Sister-in-law</td>
    </tr>
    <tr>
      <td>Eating Habits</td>
      <td>Eats everyone's leftovers</td>
      <td>Nibbles at food</td>
      <td>Hearty eater</td>
      <td>Will eat till he explodes</td>
    </tr>
  </tbody>
</table>

:root {
  --table-shadow-color: hsla(0, 0%, 87%, 0.9);
  --table-shadow-size: 0.5rem;
  --table-shadow-spread: calc(var(--table-shadow-size) * -0.5);
}

@keyframes scroll-table-shadow-inset {
  0% {
    box-shadow: inset calc(var(--table-shadow-size) * -2) 0
        var(--table-shadow-size) var(--table-shadow-spread)
        var(--table-shadow-color),
      inset 0 0 var(--table-shadow-size) var(--table-shadow-spread)
        var(--table-shadow-color);
  }
  10%,
  90% {
    box-shadow: inset calc(var(--table-shadow-size) * -1) 0
        var(--table-shadow-size) var(--table-shadow-spread)
        var(--table-shadow-color),
      inset var(--table-shadow-size) 0 var(--table-shadow-size)
        var(--table-shadow-spread) var(--table-shadow-color);
  }
  100% {
    box-shadow: inset 0 0 var(--table-shadow-size) var(--table-shadow-spread)
        var(--table-shadow-color),
      inset calc(var(--table-shadow-size) * 2) 0 var(--table-shadow-size)
        var(--table-shadow-spread) var(--table-shadow-color);
  }
}

// style

body {
  height: 100vh;
  padding: 2rem 6rem;
  display: grid;
  place-content: center;
}

table {
  width: 500px;
  font-size: 0.9rem;
}

// table

table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  animation: scroll-table-shadow-inset linear;
  animation-timeline: scroll(self x);
}

th,
td {
  padding: 1rem 2rem;
  white-space: nowrap;
  vertical-align: top;
  border-top: 1px solid #666;
  color: #000;
}

th {
  white-space: nowrap;
  vertical-align: bottom;
  border-top: none;
  border-bottom: 2px solid #666;
  background-color: hsla(0, 0%, 87%, 0.5);
}

td {
  color: #333;
  text-align: center;
}