Playing with Pseudo-Elements: Making Responsive Tables

While tables are not so common on web pages anymore. I recently came across a project with so much information. That the only way to present the data was to use a table.

Data tables can be quite wide, and necessarily so. A single row of data needs to be kept together to make any sense in a table. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can't get any narrower.

Which lead to a unique problem. What about users viewing your website on a mobile device? Responsive design is all about adjusting designs to accommodate screens of different sizes. So what happens when a screen is narrower than the minimum width of a data table? Either you zoom out far enough and see the whole table, but the text size will be too small to read or you can zoom into the point of readability, but browsing the table will require both vertical and horizontal scrolling (ugh).

So I decided to break the table and have it require only vertical scrolling (the same behaviour it would have on a larger screen).

I'm not going to go into my personal prejudices for presenting data tables on a website (which simply boils down to placing the table inside an accordion or tab panel so it doesn't unnecessarily increase the length of your page and users can choose to access the information if they want) this is about after you've made the table and you want to make it responsive.

And here's how it looks when we make it responsive:

Setting the stage

So the code at this point might look a little bit daunting but it's just a simple data table

<table class="tg">
    <tr>
        <th>S/N</th>
        <th>Title</th>
        <th>Description</th>
        <th>Content Contributor</th>
        <th>Update Frequency</th>
        <th>Target Consumers</th>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="1" style="display: none;">
            <label class="inside-label" for="1"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Organization Collaterals</td>
        <td>The Vision and Mission statement of the organization. This may also include specific statements  detailing the direction the organization is going</td>
        <td>Admin to be heavily guided by executive management</td>
        <td>Rarely or as direction changes</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="2" style="display: none;">
            <label class="inside-label" for="2"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Organization Strategy Communication </td>
        <td>The corporate strategy the organization has adopted to achieve her corporate objectives.   </td>
        <td>Admin/Corporate Communications</td>
        <td>As strategy evolves</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="3" style="display: none;">
            <label class="inside-label" for="3"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Intriguing News</td>
        <td>News about corporate events, recent successes, important milestones, upcoming events and other information that create enriches the organization brand value to employees.</td>
        <td>Admin/Corporate Communications</td>
        <td>Monthly or as event evolves</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="4" style="display: none;">
            <label class="inside-label" for="4"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Birthdays for the Month</td>
        <td>Names, Dates and Designation of Persons celebrating Birthday. Birthday followers will be able  to set reminders on subsequent anniversaries  </td>
        <td>Individuals that prefer to publish birthdays</td>
        <td>Monthly and with the consent of the individuals</td>
        <td>Birthday Followers</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="5" style="display: none;">
            <label class="inside-label" for="5"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Employees on Leave, Childbirth</td>
        <td>Names of Employees on Casual Leave, Sick or had baby within the month  </td>
        <td>HR/Admin</td>
        <td>Monthly</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="6" style="display: none;">
            <label class="inside-label" for="6"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>New Intakes, Promotions and Resignations</td>
        <td>Names of Employees that have just joined the organization, just had promotion or resigned within the month</td>
        <td>HR/Admin</td>
        <td>Monthly</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="7" style="display: none;">
            <label class="inside-label" for="7"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Photo Gallery to Past Events</td>
        <td>Photo Gallery of Recent Events, Workshops, Team Bonding Activities</td>
        <td>Corporate Communication and HR</td>
        <td>As events unfolds</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="8" style="display: none;">
            <label class="inside-label" for="8"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Link to Yammer (Yammer Webpart)</td>
        <td>A small webpart that redirect to Yammer page</td>
        <td>Default</td>
        <td>NA</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="9" style="display: none;">
            <label class="inside-label" for="9"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Link to Email (Outlook Webpart)</td>
        <td>A small webpart that redirect to Outlook page</td>
        <td>Default</td>
        <td>NA</td>
        <td>All Employees</td>
    </tr>
    <tr>
        <td>
            <input class="main" type="checkbox" id="10" style="display: none;">
            <label class="inside-label" for="10"><span><svg width="13px" height="13px"><use xlink:href="#check-tick"></use></svg></label></span>
        </td>
        <td>Link to CRM</td>
        <td>A small webpart that redirect to CRM page</td>
        <td>Default</td>
        <td>NA</td>
        <td>All Employees</td>
    </tr>
</table>
</table>

The actual code was a lot bulkier than this (now you see why I needed to use a data table to show all this information). This is a standard data table.

The CSS

I'm not going to bore you with the regular CSS used to style the table. We're focusing on the pseudo-elements (and pseudo-classes) that make it responsive.

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {


/* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

/* Switches the row alignment to left. It was originally centered */
    .tg th {
        text-align:left;
    }


/* Hide table headers (but I'm not using display: none; for accessibility reasons) */
    tr:first-of-type {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

/* Creates a 1rem margin between the row elements */
    tr {
    margin: 0 0 1rem 0;
    }

/* Creates an alternating background for each row */
    tr:nth-child(odd) {
        background: #9ABAD9;
    }

/* Forces the td elements to behave like a rows */
    td {
        border: none;
        border-bottom: 1px solid #eee !important;
        position: relative;
        padding-left: 50%;
    }

 /* Self-explanatory. We add styles that we want all
the before elements to share to avoid repetition */
    td:before{font-weight: 800}


/* The creme-de-le-creme of the responsive table. Since we have
the table headers hidden. We use these pseudo-elements to recreate the 
table headers on every row*/
    td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: "Title: "; }
    td:nth-of-type(3):before { content: "Description: "; }
    td:nth-of-type(4):before { content: "Content Contributor: "; }
    td:nth-of-type(5):before { content: "Update Frequency: "; }
    td:nth-of-type(6):before { content: "Target Consumers: "; }


}

And with this we've made the table easily readable on a smaller screen size.

Hopefully, this article was educative or useful to you. As usual, let me know if; there's something I missed, you have a neater way of doing this or you have something you'd like me to cover in another article.