You are viewing version 3 of the library, the latest version is
<table class="responsive-table">
            <th>Lorem Ipsum</th>
            <td>eget etiam</td>
            <td>pede nullam nascetur habitasse</td>
            <td>accumsan non</td>
            <td>sit viverra aenean bibendum</td>
            <td>maecenas pretium</td>
            <td>nascetur risus aliquet ipsum</td>
            <td>consectetur mi</td>
            <td>metus est dictum mollis elementum torquent. Ad ligula quis convallis per natoque</td>
            <td>porta non</td>
            <td>aenean lorem pulvinar eros</td>

Responsive Table

A custom component created for Nijmegen, based on this CSS-Tricks demo.


  • The caption element functions as a heading for the table. Captions help (screen-reader) users to find a table and understand what it’s about.
  • If the table is hard to interpret it can help to add a summary in the caption as wel.
  • If the caption is not wanted visually you can hide this by applying the class sr-only. It is also possible to hide only the summary.