Data Table

Small Screen DataTable

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table" id="customDataTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
  </tbody>
</table>

CSS

@media screen and (max-width: 640px) {
  table#customDataTable caption {
    background-image: none;
  }
  table#customDataTable thead {
    display: none;
  }
  table#customDataTable tbody td {
    display: block;
    padding: .6rem;
  }
  table#customDataTable tbody tr td:first-child {
    background: #666;
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child a {
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child:before {
    color: rgb(225, 181, 71);
  }
  table#customDataTable tbody td:before {
    content: attr(data-th);
    font-weight: bold;
    display: inline-block;
    width: 10rem;
  }
  table#customDataTable tr th:last-child,
  table#customDataTable tr td:last-child {
    max-width: 100% !important;
    min-width: 100px !important;
    width: 100% !important;
  }
}