Class SCSS Responsive Table

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

        tr {
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          border-color: #46637f;
        }

        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: #dd5;
        }
      }

      @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;
        }
      }

HTML Responsive Table

<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>