Pure CSS Mobile-friendly Responsive Table

Category: CSS & CSS3 , Table | September 8, 2016
Views Total:22,044 views
Official Page:Go to website
Last Update:September 8, 2016


Pure CSS Mobile-friendly Responsive Table


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;

You Might Be Interested In:

3 thoughts on “Pure CSS Mobile-friendly Responsive Table

  1. Brian

    I wonder if this method still workable if one of my table column is a select tag or checkbox?

  2. Bndr Soliman

    this is simple and direct but how to convert it to support RTL pages?
    thank you 🙂


Leave a Reply