Cacher is the code snippet organizer for pro developers

/* TABLE */
.rwd-table {
    margin: 0;
    width: 100%;
    background: #222;
    color: white;
    border-radius: 0;
    overflow: hidden;
    tr {
        border-bottom: 1px rgba(0,0,0,.3) solid;
        border-bottom: 1px rgba(0,0,0,.3) solid;
        border-color: rgba(0,0,0,.3);
        &:nth-child(even) {
            background: #2c2c2c;
        }
    }
    th {
        display: none;
        margin: .5em 1em;
        color: #9d9d9d;
        text-align: left;
        @media (min-width: 992px) {
            padding: 1em !important;
            display: table-cell;
            padding: .25em .5em;
            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 0;
            }
        }
    }
    td {
      display: block;
      margin: .5em 1em;
      text-align: left;
      @media (min-width: 992px) {
          padding: 1em !important;
          display: table-cell;
          padding: .25em .5em;
          &:before {
              display: none;
          }
          &:first-child {
              padding-left: 0;
          }
          &:last-child {
              padding-right: 0;
          }
      }
      @media (max-width: 991px) {
          &:before {
              content: attr(data-th) ": ";
              font-weight: bold;
              width: 6.5em;
              display: inline-block;
              color: #9d9d9d;
          }
      }
      &:first-child {
          padding-top: .5em;
      }
      &:last-child {
          padding-bottom: .5em;
      }
    }
}

<table class="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>