JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<table style="width:100%">
  <thead class="table-header">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
  </thead>

  <tbody class="table-body">
    <tr>
      <td data-label="first name">Jill</td>
      <td data-label="last name">Smith</td> 
      <td data-label="age">50</td>
    </tr>
    <tr>
      <td data-label="first name">Jill</td>
      <td data-label="last name">Smith</td> 
      <td data-label="age">50</td>
    </tr>
    <tr>
      <td data-label="first name">Jill</td>
      <td data-label="last name">Smith</td> 
      <td data-label="age">50</td>
    </tr>
    <tr>
      <td data-label="first name">Jill</td>
      <td data-label="last name">Smith</td> 
      <td data-label="age">50</td>
    </tr>
    <tr>
      <td data-label="first name">Jill</td>
      <td data-label="last name">Smith</td> 
      <td data-label="age">50</td>
    </tr>
  </tbody>
</table>

SCSS

$tablet: 768px;

body {
  padding: 1rem;
}

table {
  border-collapse: collapse;
  text-align: left;
  max-width: 700px;
  margin: 1rem auto;
  border-radius: 3px;
}

.table-header {
  display: none;
  
  @media screen and (min-width: $tablet) {
    display: table-header-group;
  }
}

.table-body {  
  tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 1rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid #ccc;
    
    &:not(:last-of-type) {
      margin-bottom: 1rem;
    }
    
    @media screen and (min-width: $tablet) {
      display: table-row;
      text-align: left;
      border: none;
      
      &:nth-child(even) {
        background: #eee;
      }
    }
  }
  
  td[data-label] {
    &::before {
      content: attr(data-label);
      text-transform: uppercase;
      display: block;
      margin-bottom: .25rem;
      
      @media screen and (min-width: $tablet) {
        display: none;
      }
    }
  }
}