TABLE RESPONSIVE SCSS

index.html

<table className="rwd-table">
          <tr>
            <th>Movie Title</th>
            <th>Genre</th>
            <th>Year</th>
            <th>Gross</th>
          </tr>
          <tr>
            <td data-th="Movie Title">Star Wars</td>
            <td data-th="Genre">Adventure, Sci-fi</td>
            <td data-th="Year">1977</td>
            <td data-th="Gross">$460,935,665</td>
          </tr>
          <tr>
            <td data-th="Movie Title">Howard The Duck</td>
            <td data-th="Genre">Comedy</td>
            <td data-th="Year">1986</td>
            <td data-th="Gross">$16,295,774</td>
          </tr>
          <tr>
            <td data-th="Movie Title">American Graffiti</td>
            <td data-th="Genre">Comedy, Drama</td>
            <td data-th="Year">1973</td>
            <td data-th="Gross">$115,000,000</td>
          </tr>
        </table>

style.scss

.rwd-table {
      width: 100%;
      margin-top: 1rem;
      background: #fff;
      color: #34495e;
      border-radius: 0.4em;
      overflow: hidden;
      border-collapse: collapse;

      & tr {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;

        &:first-of-type {
          background: #f9f9fb;
        }
      }
      & th {
        display: none;
      }

      & td {
        display: block;

        &:first-child {
          padding-top: 0.5em;
        }

        &:last-child {
          padding-bottom: 0.5em;
        }

        &:before {
          content: attr(data-th) ': ';
          font-weight: bold;
          width: 6.5em;
          display: inline-block;
        }
      }

      & th,
      & td {
        text-align: left;
        margin: 0.5em 1em;
      }

      & th,
      & td:before {
        color: #9fa1bb;
      }
    }

    @media (min-width: 480px) {
      .rwd-table td:before {
        display: none;
      }

      .rwd-table th,
      .rwd-table td {
        display: table-cell;
        padding: 1em !important;
      }
      .rwd-table th:first-child,
      .rwd-table td:first-child {
        padding-left: 0;
      }
      .rwd-table th:last-child,
      .rwd-table td:last-child {
        padding-right: 0;
      }
    }