Tabeldata over meerdere rijen

Data weergeven over meer dan een rij kan gebruikt worden binnen tabellen.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Benodigdheden. Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
  2. Om een datacel over meerdere rijen te plaatsen gebruik een rowspan="[number]". Voorbeeld: rowspan="2" op de td.

Voorbeelden

Visueel voorbeeld:

Tabelvoorbeeld met data over meerdere rijen:
Lorem ipsumDolor setTotal
Lorem10150
Ipsum100
Lorem40

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met data over meerdere rijen:</caption>
    <thead>
      <tr>
        <th scope="col">Lorem ipsum</th>
        <th scope="col">Dolor set</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>10</td>
        <td rowspan="3">150</td>
      </tr>
      <tr>
        <td>Ipsum</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

  • table/table-base.scss
  • table/table-base-variables.scss

Instelbare variabelen

Dit component heeft momenteel geen instelbare variabelen