Pure CSS Responsive Tables

In this tutorial I’m going to show you how to create a pure css responsive table. We’ll do it in two steps.

First, creating a basic HTML table with some basic CSS styling. Then, we’ll add some HTML5 data attributes that will be used to display the column’s label on smaller device sizes.

I got the idea from Chris Coyier from CSS-Tricks, he used CSS to display the column names, but we’re going to use data-attribute so we can edit it from the HTML.

[tutorial_details]

Creating the Table

The first thing we need to do, is create the HTML structure of our table. A basic four column table ( First name, Last name, job title and Twitter handle ), with a table header.

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Twitter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>@james</td>
        </tr>
        <tr>
            <td>Andor</td>
            <td>Nagy</td>
            <td>Designer</td>
            <td>@andornagy</td>
        </tr>
        <tr>
            <td>Tamas</td>
            <td>Biro</td>
            <td>Game Tester</td>
            <td>@tamas</td>
        </tr>
        <tr>
            <td>Zoli</td>
            <td>Mastah</td>
            <td>Developer</td>
            <td>@zoli</td>
        </tr>
        <tr>
            <td>Szabi</td>
            <td>Nagy</td>
            <td>Chief Sandwich Eater</td>
            <td>@szabi</td>
        </tr>
    </tbody>
</table>

And now to add some basic styling:

table { 
    width: 750px; 
    border-collapse: collapse; 
    margin:50px auto;
    }
/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
    }
th { 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    }
td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px;
    }

After applying the css above, you should have something that looks like this:

Making it Responsive

To make our table responsive, we’ll use the data-attribute that comes with HTML5. I’ve written a tutorial about how to display the HTML5 data attribute values with CSS. We’ll use the exact same method.

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Twitter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-column="First Name">James</td>
            <td data-column="Last Name">Matman</td>
            <td data-column="Job Title">Chief Sandwich Eater</td>
            <td data-column="Twitter">@james</td>
        </tr>
        <tr>
            <td data-column="First Name">Andor</td>
            <td data-column="Last Name">Nagy</td>
            <td data-column="Job Title">Designer</td>
            <td data-column="Twitter">@andornagy</td>
        </tr>
        <tr>
            <td data-column="First Name">Tamas</td>
            <td data-column="Last Name">Biro</td>
            <td data-column="Job Title">Game Tester</td>
            <td data-column="Twitter">@tamas</td>
        </tr>
        <tr>
            <td data-column="First Name">Zoli</td>
            <td data-column="Last Name">Mastah</td>
            <td data-column="Job Title">Developer</td>
            <td data-column="Twitter">@zoli</td>
        </tr>
        <tr>
            <td data-column="First Name">Szabi</td>
            <td data-column="Last Name">Nagy</td>
            <td data-column="Job Title">Chief Sandwich Eater</td>
            <td data-column="Twitter">@szabi</td>
        </tr>
    </tbody>
</table>

As you can see in the HTML above, we added the data-column=”” attribute to each <td> element, with the value of the table column. Then, we’ll hide the table header, thead tr with CSS and turn each table row into a two column row. In the left row we’ll display the data-column=”” which is the main columns label, and on the right one, <td> value of the specific row and column.

This might sound complicated but after we add our CSS and you see how it actually looks like, it becomes much more simple.

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table { 
          width: 100%; 
    }
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, 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 #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        color: #3498db;
    }
}

And then, you should have something like the following in the pen below. Feel free to open the pen in a new tab and play around with the results window size to see how the table changes.

See the Pen Pure CSS Responsive Table. by Andor Nagy (@andornagy) on CodePen.

I hope this short tutorial helped you transform your basic non-responsive tables into some awesome pure css responsive tables. Also don’t forget to check Chris’s tutorial, you can find a link to that at the top of this post, and also if you have any question or suggestions, feel free to leave a comment below!