JSFiddle - React, Tailwind, and code Playground

HTML

<!-- This is a minimally styled version of the code found here https://whatabouthtml.com/ui-component/responsive-table-with-vertically-stacked-cells/ -->

<html>
  <table width="100%" class="table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Document</th>
        <th>Type</th>
        <th>Color</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name">Jay</td>
        <td data-label="Document">Handsome</td>
        <td data-label="Type">Dog</td>
        <td data-label="Color">Black</td>
      </tr>
      <tr>
        <td data-label="Name">Carl</td>
        <td data-label="Document">Friendly</td>
        <td data-label="Type">Cat</td>
        <td data-label="Color">Orange</td>
      </tr>
      <tr>
        <td data-label="Name">Hissy</td>
        <td data-label="Document">Eats well</td>
        <td data-label="Type">Snake</td>
        <td data-label="Color">Green</td>
      </tr>
    </tbody>
  </table>
</html>

CSS

.table-striped tbody tr:nth-child(odd) {
  background-color: #E7E9EB;
}

table {
  table-layout: fixed;
}

table thead th {
  text-align: left;
}

@media screen and (max-width: 600px) {
  table thead th {
    display: none;
  }

  table td {
    display: block;
  }

  table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right:10px;
  }
}