Pure CSS Mobile-friendly Responsive Table Design

A pure CSS responsive table design that converts a regular HTML table into several separate tables in mobile view.

table responsive in mobile view, responsive table patterns, tables on mobile devices html, jquery responsive table, collapsed responsive data table, html table responsive columns

How to make use of it:

Use the data label attribute to specify the header of each cell in the table.

<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>

Basic CSS Styles for Responsive Table Display.

/*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;
}
}

Pure CSS Mobile-friendly Responsive Table, responsive-table Plugin/Github, responsive table plugin, responsive table data attribute


See Demo And Download

Official Website(kkayyoo): Click Here

This superior jQuery/javascript plugin is developed by kkayyoo. For extra Advanced Usage, please go to the official website.

Share