Tabeldata over meerdere kolommen

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 kolommen te plaatsen gebruik een colspan="[number]". Voorbeeld: colspan="3" op de td.

Voorbeelden

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met data over meerdere kolommen:</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>150</td>
      </tr>
      <tr>
        <td colspan="3">Ipsum</td>
      </tr>
    </tbody>
  </table>
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/table";

Instelbare variabelen

Dit component heeft momenteel geen instelbare variabelen

Gerelateerde pagina's