Tabeldata over meerdere kolommen

Introductie

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

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/table";
  

Benodigde stappen

1. Om een datacel over meerdere kolommen te plaatsen gebruik een colspan="[number]". Voorbeeld: colspan="3" op de td.

Voorbeelden

    
      
    
    <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 sit</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>