Pure CSS Mobile-friendly Responsive Table

Category: CSS & CSS3 , Table | September 8, 2016
Author: kkayyoo
Views Total: 1,101
Official Page: Go to website
Last Update: September 8, 2016
License: MIT

Preview:

Pure CSS Mobile-friendly Responsive Table

Description:

Yet another pure CSS responsive table solution that transforms a normal html table into several separated tables in mobile view.

How to use it:

Use the data-label attribute to specify the header for each table cell.

<td data-label="First Name">Bob</td>
<td data-label="Last Name">Smith</td>
<td data-label="School">Northeastern University</td>
<td data-label="Major">Computer Science</td>

The core CSS styles for the responsive table view.

/*Mobile View*/
@media only screen and  (max-width: 760px) {

td, tr { display: block; }

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

tr { border: 1px solid #E74C3C; }

tr + tr { margin-top: 1.5em; }

td {
  /* make like a "row" */
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 50%;
  background-color: #F8D9D5;
  text-align: left;
}

td:before {
  content: attr(data-label);
  display: inline-block;
  line-height: 1.5;
  margin-left: -100%;
  width: 100%;
  white-space: nowrap;
}
}