<h6>Responsive Table</h6>
<table class="responsive-table">
    <thead>
        <tr>
            <th>Straat</th>
            <th>Huisnummer</th>
            <th>Toevoeging</th>
            <th>Anim pariatur cliche reprehenderit, enim eiusmod high life</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Lettuce Green</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Tick</td>
            <td>Crimefighter Sorta</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>Jokey</td>
            <td>Smurf</td>
            <td>Giving Exploding Presents</td>
            <td>One</td>
        </tr>
        <tr>
            <td>Cindy</td>
            <td>Beyler</td>
            <td>Sales Representative</td>
            <td>3451</td>
        </tr>
        <tr>
            <td>Captain</td>
            <td>Cool</td>
            <td>1.9</td>
            <td>Under the couch</td>
        </tr>
    </tbody>
</table>

Responsive table

This is a custom component, based on this demo.

Using responsive tables in HTML

To use the responsive tables we need a little bit of js to make it work properly on mobile.

    $('.responsive-table').each(function() {
        var headings = $(this).find('thead th').map(function() {
            return this.textContent;
        }).toArray();

        if (headings.length > 0) {
            $(this).find('tbody td').each(function(tdIdx) {
                this.setAttribute('data-title', headings[tdIdx % headings.length]);
            });
        }
    });