Pure HTML5 / CSS3 Responsive Table Solution

Category: CSS & CSS3 , Table | May 2, 2016
Views Total:19,667 views
Official Page:Go to website
Last Update:May 2, 2016


Pure HTML5 / CSS3 Responsive Table Solution


A pure HTML5 / CSS3 solution to make your html table more readable on small screens, without any JavaScript.

How to use it:

Use the data-label attribute to specify the corresponding thead element for each table cell.

      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    <td scope="row" data-label="Column 1">1</td>
    <td data-label="Column 2">2</td>
    <td data-label="Column 3">3</td>
    <td data-label="Column 4">4</td>

Style the regular html table.

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
table th, table td {
  padding: .625em;
  text-align: center;
table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;

Make the html table responsive using CSS3 media queries.

@media screen and (max-width: 639px) {
table { border: 0; }
table thead { display: none; }
table tr {
  border-bottom: 3px solid #ddd;
  display: block;
  margin-bottom: .625em;
table td {
  border-bottom: 1px solid #ddd;
  display: block;
  font-size: .8em;
  text-align: right;
table td:before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  text-transform: uppercase;
table td:last-child { border-bottom: 0; }


You Might Be Interested In:

Leave a Reply