JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
  <tr><th>Size</th><th>Color</th><th>Price</th></tr>
</thead>
<tbody>
  <tr>
    <td data-label="Size">Small</td>
    <td data-label="Color">Red</td>
    <td data-label="Price">4.95</td>
  </tr>
  <tr>
    <td data-label="Size">Medium</td>
    <td data-label="Color">Blue</td>
    <td data-label="Price">5.75</td>
  </tr>
  <tr>
    <td data-label="Size">Large</td>
    <td data-label="Color">Green</td>
    <td data-label="Price">6.80</td>
  </tr>
</tbody>
</table>

CSS

table { border-collapse: collapse; min-width: 200px; }
thead { display: none; }
tr { display: block; padding: 0.5em; border: 1px solid #BBB; }
td { display: block; padding-left: 40%; }
td:before { content: attr(data-label); display: inline-block; width: 50%; margin-left: -65%; font-weight: bold; }
tbody tr:nth-child(even) { background-color: #E0E0E0; }
tbody td:not(:last-child) { border-bottom: 1px solid #DDD; }

@media screen and (min-width: 60em) {
  thead { display: table-header-group; }
  thead tr { background-color: #AAA; }
  /*thead th:not(:last-child) { border-right: 1px solid #999; }*/
  tr { display: table-row; }
  td { display: table-cell; padding: 0.2em; }
  td:before { display: none; }
  tbody td:not(:last-child) { border-bottom: none; border-right: 1px solid #DDD; }
}