responsive table

css

table {
  td {
    display: block;
    margin-bottom: 20px;
    line-height: 20px;
    font-size: 15px;

    &:not(:empty)::before {
      content: attr(data-title);
      display: block;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    td:empty {
      display: none;
    }
  }

  th {
    display: none;
  }

  tr {
    border-bottom: 1px solid #fff;
    display: block;
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}

@media screen and (min-width: 768px) {
  table {
    td {
      display: table-cell;

      &:not(:empty)::before {
        display: none;
      }
    }

    th {
      display: table-cell;
    }

    tr {
      display: table-row;
    }
  }
}

html

<table>
                    <thead>
                        <tr>
                            <th>DATE</th>
                            <th>SHOW</th>
                            <th>LOCATION</th>
                            <th>REGISTRATION</th>
                            <th>GUEST REGISTRATION CODE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-title="DATE">June 5-7</td>
                            <td data-title="SHOW">Dattocon 2017</td>
                            <td data-title="LOCATION">Denver, Colorado</td>
                            <td data-title="REGISTRATION"><a href="#" class="btn">REGISTER</a></td>
                            <td data-title="GUEST REGISTRATION CODE">20guest</td>
                        </tr>
                        <tr>
                            <td data-title="DATE">June 19-21</td>
                            <td data-title="SHOW">Automation Nation</td>
                            <td data-title="LOCATION">Orlando, Florida</td>
                            <td data-title="REGISTRATION"><a href="#" class="btn">REGISTER</a></td>
                            <td data-title="GUEST REGISTRATION CODE">20guest</td>
                        </tr>
                        <tr>
                            <td data-title="DATE">August 7-11</td>
                            <td data-title="SHOW">HTG Q3</td>
                            <td data-title="LOCATION">Denver, Colorado</td>
                            <td data-title="REGISTRATION"><a href="#" class="btn">REGISTER</a></td>
                            <td data-title="GUEST REGISTRATION CODE">20guest</td>
                        </tr>
                        <tr>
                            <td data-title="DATE">November 8-10</td>
                            <td data-title="SHOW">IT Nation</td>
                            <td data-title="LOCATION">Orlando, Florida</td>
                            <td data-title="REGISTRATION"><a href="#" class="btn">REGISTER</a></td>
                            <td data-title="GUEST REGISTRATION CODE">20guest</td>
                        </tr>
                    </tbody>
                </table>