Creating a Responsive Table with CSS

I am sure you will find many methods and sources showing how to create a responsive table, some are good and some less so. Among these methods, you will find sophisticated tables built using CSS Grid, and even very simple tables, which cannot be called responsive tables because they display a table with a scrollbar on mobile.

But there is a very nice method for building a responsive table in CSS made possible by using the pseudo-element and the content property. If you are not familiar with this property, it allows the developer to determine the content of that pseudo-element statically or dynamically. For example:

.class:after { content: "I am hardcoded text from the *content* property";  }

Furthermore, if you are interested in using an attribute of any element as that content (and therefore we mentioned the dynamic method previously), you can use the attr expression:

<div class="myClass" data-content="here you can set up the content to be used (for example)"></div>

.myClass:after { 
    content: attr(data-content); /* no quotes around attribute name! */
}

And after explaining this, let’s return to our responsive table and see how to create one using CSS, the content property, and the attr expression.

We won’t explain too much, but note that on mobile we hide the header row of the table (thead), and in order to display the content of those headers on mobile, we use the property and expression we mentioned. Here’s the HTML:

<table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issuance Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Issuance Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Issuance Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
        <tr>
      <td data-label="Payment">Payment #3</td>
      <td data-label="Issuance Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2012 - 01/21/2014</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #4</td>
      <td data-label="Issuance Date">03/01/2015</td>
      <td data-label="Amount">$4,211</td>
      <td data-label="Period">02/01/2014 - 02/28/2016</td>
    </tr>
  </tbody>
</table>

And here’s the CSS in this case:

table {
  border: 1px solid #ccc;
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-weight: 300;
  font-size: 14px;
  max-width: 800px;
  margin: 20px auto;

}
thead > tr > th {
  font-weight: 600;
  font-size: 16px;
}
table tr {
  border: 1px solid #ddd;
  padding: 5px;
}

table th,
table td {
  padding: 10px;
  text-align: center;
}

table th {
  text-transform: uppercase;
  font-size: 14px;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table thead {
    display: none;
  }

  table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
  }

  table td {
    display: block;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
  }

  table td:last-child {
    border-bottom: 0;
  }

  table td:before {
    content: attr(data-label);
    float: right;
    text-transform: uppercase;
    font-weight: 600;
  }
}

The use of the attr expression and the content property is made in line number 61.

The result we will get will be in the following style:

You are invited to view it on desktop and mobile to see the differences (or simply narrow the browser width).