Responsive Table

Uses data attributes in some magical ways to make a table very readable on narrow screens.

by Carson Evans

HTML

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="#">1</td>
      <td data-title="Name">Foo Bar</td>
      <td data-title="Date">2017-08-12</td>
    </tr>
    <tr>
      <td data-title="#">2</td>
      <td data-title="Name">John Smith</td>
      <td data-title="Date">2018-08-12</td>
    </tr>
    <tr>
      <td data-title="#">3</td>
      <td data-title="Name">Dude Bro</td>
      <td data-title="Date">2019-08-12</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font-family: Helvetica;
  font-size: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  border-bottom: 4px solid #ddd;
}

th {
  text-align: left;
}

th, td {
  padding: 0.75rem;
}

td {
  border-top: 1px solid #ddd;
}

@media only screen and (max-width: 768px) {
  thead {
    display: none;
  }

  tr {
    border-top: 4px solid #ddd;
  }

  td {
    display: block;
  }

  td::before {
    display: inline-block;
    width: 100px;
    content: attr(data-title);
    font-weight: bold;
  }
}