Tabellen

Overzicht

Vanwege het wijdverbreide gebruik van <table>-elementen in widgets van derden, zoals kalenders en datumkiezers, zijn de tabellen van Bootstrap opt-in. Voeg de basisklasse .table toe aan een willekeurige <table> en breid die daarna uit met onze optionele modifier-klassen of eigen stijlen. Tabelstijlen worden in Bootstrap niet geërfd, wat betekent dat geneste tabellen onafhankelijk van de bovenliggende tabel kunnen worden opgemaakt.

Met de meest basale tabelmarkup zien op .table gebaseerde tabellen er in Bootstrap zo uit.

Varianten

Gebruik contextuele klassen om tabellen, tabelrijen of losse cellen in te kleuren.

</tbody>

<!-- On tables -->

<table class="table-primary">...</table>

<table class="table-secondary">...</table>

<table class="table-success">...</table>

<table class="table-danger">...</table>

<table class="table-warning">...</table>

<table class="table-info">...</table>

<table class="table-light">...</table>

<table class="table-dark">...</table>



<!-- On rows -->

<tr class="table-primary">...</tr>

<tr class="table-secondary">...</tr>

<tr class="table-success">...</tr>

<tr class="table-danger">...</tr>

<tr class="table-warning">...</tr>

<tr class="table-info">...</tr>

<tr class="table-light">...</tr>

<tr class="table-dark">...</tr>



<!-- On cells (`td` or `th`) -->
<tr>

  <td class="table-primary">...</td>

  <td class="table-secondary">...</td>

  <td class="table-success">...</td>

  <td class="table-danger">...</td>

  <td class="table-warning">...</td>

  <td class="table-info">...</td>

  <td class="table-light">...</td>

  <td class="table-dark">...</td>


</tr>

Tabellen met accenten

Gestreepte rijen

Gebruik .table-striped om zebrastrepen toe te voegen aan elke tabelrij binnen de <tbody>.

Gestreepte kolommen

Gebruik .table-striped-columns om zebrastrepen toe te voegen aan elke tabelkolom.

Deze klassen kunnen ook aan tabelvarianten worden toegevoegd:

Rijen met hover

Voeg .table-hover toe om een hover-state op tabelrijen binnen een <tbody> in te schakelen.

Deze rijen met hover kunnen ook worden gecombineerd met de variant met gestreepte rijen:

Actieve tabellen

Licht een tabelrij of -cel uit door een .table-active-klasse toe te voegen.

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hoe werken de varianten en tabellen met accenten?

Voor de tabellen met accenten (gestreepte rijen, gestreepte kolommen, rijen met hover en actieve tabellen) hebben we een aantal technieken gebruikt om deze effecten voor al onze tabelvarianten te laten werken:

• We beginnen met het instellen van de achtergrond van een tabelcel met de custom property --bs-table-bg. Alle tabelvarianten stellen die custom property vervolgens in om de tabelcellen in te kleuren. Zo komen we niet in de problemen wanneer halftransparante kleuren als tabelachtergrond worden gebruikt.
• Daarna voegen we een inset box shadow toe op de tabelcellen met box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); om die boven op een eventuele opgegeven background-color te leggen. Omdat we een enorme spread en geen blur gebruiken, wordt de kleur monotoon. Aangezien --bs-table-accent-bg standaard niet is ingesteld, hebben we geen standaard box shadow.
• Wanneer de klassen .table-striped, .table-striped-columns, .table-hover of .table-active worden toegevoegd, wordt --bs-table-accent-bg op een halftransparante kleur gezet om de achtergrond in te kleuren.
• Voor elke tabelvariant genereren we een --bs-table-accent-bg-kleur met het hoogste contrast, afhankelijk van die kleur. Zo is de accentkleur voor .table-primary donkerder, terwijl .table-dark juist een lichtere accentkleur heeft.
• Tekst- en randkleuren worden op dezelfde manier gegenereerd, en hun kleuren worden standaard geërfd.

Achter de schermen ziet dat er zo uit:

Standaardwaarden: zie scss/mixins/_table-variants.scss in de Bootstrap-broncode.

Tabelranden

Tabellen met randen

Voeg .table-bordered toe voor randen aan alle zijden van de tabel en de cellen.

Utilities voor randkleur kunnen worden toegevoegd om de kleuren te wijzigen:

Tabellen zonder randen

Voeg .table-borderless toe voor een tabel zonder randen.

Kleine tabellen

Voeg .table-sm toe om een .table compacter te maken door alle cel-padding te halveren.

Scheidingslijnen tussen tabelgroepen

Voeg met .table-group-divider een dikkere, donkerdere rand tussen tabelgroepen — <thead>, <tbody> en <tfoot> — toe. Pas de kleur aan door de border-top-color te wijzigen (waar we op dit moment geen utility-klasse voor bieden).

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Voornaam</th>
      <th scope="col">Achternaam</th>
      <th scope="col">Gebruikersnaam</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Verticale uitlijning

Tabelcellen van <thead> worden altijd verticaal onderaan uitgelijnd. Tabelcellen in <tbody> erven hun uitlijning van <table> en worden standaard bovenaan uitgelijnd. Gebruik de vertical align-klassen om ze waar nodig anders uit te lijnen.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">Deze cel is bovenaan uitgelijnd.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nesten

Randstijlen, active-stijlen en tabelvarianten worden niet geërfd door geneste tabellen.

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hoe nesten werkt

Om te voorkomen dat welke stijl dan ook naar geneste tabellen doorlekt, gebruiken we in onze CSS de child-combinator (>). Omdat we alle tds en ths in de thead, tbody en tfoot moeten targeten, zou onze selector zonder die combinator behoorlijk lang worden. Daarom gebruiken we de wat vreemd ogende selector .table > :not(caption) > * > * om alle tds en ths van de .table te targeten, maar geen enkele van eventuele geneste tabellen.

Let op: als je <tr>s als directe kinderen van een tabel toevoegt, worden die <tr>s standaard in een <tbody> gewikkeld, waardoor onze selectors werken zoals bedoeld.

Anatomie

Tabelkop

Net als bij tabellen en donkere tabellen gebruik je de modifier-klassen .table-light of .table-dark om <thead>s lichtgrijs of donkergrijs te maken.

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tabelvoet

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Bijschriften

Een <caption> werkt als een kop voor een tabel. Het helpt gebruikers met schermlezers om een tabel te vinden, te begrijpen waar die over gaat en te beslissen of ze hem willen lezen.

<table class="table table-sm">
  <caption>Lijst met gebruikers</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Je kunt de <caption> met .caption-top ook bovenaan de tabel plaatsen.

<table class="table caption-top">
  <caption>Lijst met gebruikers</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Voornaam</th>
      <th scope="col">Achternaam</th>
      <th scope="col">Gebruikersnaam</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Responsieve tabellen

Met responsieve tabellen kun je tabellen eenvoudig horizontaal scrollen. Maak elke tabel responsief op alle viewports door een .table in .table-responsive te wikkelen. Of kies met .table-responsive{-sm|-md|-lg|-xl|-xxl} een maximaal breakpoint tot waar de tabel responsief is.

Altijd responsief

Gebruik .table-responsive voor horizontaal scrollende tabellen op elk breakpoint.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Per breakpoint

Gebruik .table-responsive{-sm|-md|-lg|-xl|-xxl} naar behoefte om tabellen tot een bepaald breakpoint responsief te maken. Vanaf dat breakpoint gedraagt de tabel zich normaal en scrollt hij niet horizontaal.

Deze tabellen kunnen er kapot uitzien totdat hun responsieve stijlen bij bepaalde viewportbreedtes van kracht worden.

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>



<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>



<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>



<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>



<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Loop

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Aanpassen

• De factor-variabelen ($table-striped-bg-factor, $table-active-bg-factor en $table-hover-bg-factor) worden gebruikt om het contrast in tabelvarianten te bepalen.
• Afgezien van de light- en dark-tabelvarianten worden themakleuren lichter gemaakt met de variabele $table-bg-scale.