CERN Accelerating science

Close menu

How to create responsive tables on Drupal 8

Problem

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

However most Drupal themes by default do not support responsive tables, at least not when you use the normal table structure. As a result in order to achieve responsive tables you - as a site builder/developer - need to apply some modifications. On this article we will describe a simple way how to create responsive tables on Drupal 8.

Solution

For our solution you should use an external module called Simple Responsive Table. 

Step 1: Install Simple Responsive Table module

This module provides the stylesheet in order to make the tables responsive. However, in order to make a table responsive you need to apply specific classes and structure to your table. 

Step 2: Apply structure on table

For step 2 we will present an example on how to structure your table in order to be responsive:

 


<table class="simple-responsive-table">
    <thead>
        <tr>
            <th>Company</th>
            <th">Contact</th>
            <th">Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
        </tr>
    </tbody>
</table>


Under responsive conditions (for example if you look the website from a smartphone) each cell of a normal table becomes a table row, so that the table will fit and will not overflow. The following image shows an example of how the table will render under responsive conditions.

Responsive table example