You are viewing version 3 of the library, the latest version is
<table class="responsive-table complex-table">
    <caption>
        Personen
        <p class="summary">
            Personen met voornaam, achternaam en beschrijving. De eerste kolom geeft de titel van een persoon weer.
        </p>
    </caption>
    <thead>
        <tr>
            <th>Titel</th>
            <th>Voornaam</th>
            <th>Achternaam</th>
            <th>Beschrijving</th>
            <th>Lorem Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Titel 1</th>
            <td>James</td>
            <td>Matman</td>
            <td>eget etiam</td>
            <td>pede nullam nascetur habitasse</td>
        </tr>
        <tr>
            <th>Titel 2</th>
            <td>The</td>
            <td>Tick</td>
            <td>accumsan non</td>
            <td>sit viverra aenean bibendum</td>
        </tr>
        <tr>
            <th>Titel 3</th>
            <td>Jokey</td>
            <td>Smurf</td>
            <td>maecenas pretium</td>
            <td>nascetur risus aliquet ipsum</td>
        </tr>
        <tr>
            <th>Titel 4</th>
            <td>Cindy</td>
            <td>Beyler</td>
            <td>consectetur mi</td>
            <td>metus est dictum mollis elementum torquent. Ad ligula quis convallis per natoque</td>
        </tr>
        <tr>
            <th>Titel 4</th>
            <td>Captain</td>
            <td>Cool</td>
            <td>porta non</td>
            <td>aenean lorem pulvinar eros</td>
        </tr>
    </tbody>
</table>

Complex Responsive Table

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

Notes

  • 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 caption is not wanted visually you can hide this by applying the class sr-only
  • Handle: @complex-table
  • Preview:
  • Filesystem Path: components/responsive-table/complex-table/complex-table.hbs