<table class="responsive-table complex-table">
<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>
A custom component created for Nijmegen, based on this CSS-Tricks demo.
To start using this component and facilitate a correct layout on mobile devices, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.
<script>
$('.responsive-table.complex-table').each(function () {
var headings = $(this).find('thead th:not(:first-child)').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]);
});
}
});
</script>