CSS Responsive Table

JSFiddle Demo.

HTML:

<table class="table-stacked">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="#">1</td>
      <td data-th="First Name">Brenda</td>
      <td data-th="Last Name">Bear</td>
    </tr>

    <tr>
      <td data-th="#">2</td>
      <td data-th="First Name">Frank</td>
      <td data-th="Last Name">Fox</td>
    </tr>

    <tr>
      <td data-th="#">3</td>
      <td data-th="First Name">William</td>
      <td data-th="Last Name">Wolf</td>
    </tr>
  </tbody>
</table>

CSS:

.table-stacked {
  width: 100%;
}

.table-stacked thead tr {
  border-bottom: 1px solid gray;
}

@media (max-width: 768px) {
  .table-stacked thead {
    display: none;
  }
  .table-stacked td {
    display: flex;
    border-color: gray;
  }
  .table-stacked td:before {
    content: attr(data-th);
    font-weight: bold;
    width: 30%;
    min-width: 80px;
    padding: 10px;
    padding-left: 0;
    margin: -10px 10px;
    margin-left: 0;
    border-right: 1px solid gray;
    border-width: 2px;
  }
  .table-stacked td:last-child {
    border-bottom: 1px solid gray;
    border-color: gray;
  }
}