Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Tafels

Documentatie en voorbeelden voor opt-in-styling van tabellen (gezien hun algemeen gebruik in JavaScript-plug-ins) met Bootstrap.

Op deze pagina

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 .tabletoe aan elke <table>, en breid deze vervolgens uit met onze optionele modificatieklassen of aangepaste stijlen. Alle tabelstijlen worden niet overgenomen in Bootstrap, wat betekent dat alle geneste tabellen onafhankelijk van de bovenliggende tabel kunnen worden gestyled.

Met behulp van de meest elementaire tabelopmaak ziet u hier hoe .table-gebaseerde tabellen eruitzien in Bootstrap.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

varianten

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

Klas rubriek rubriek
Standaard Cel Cel
primair Cel Cel
Ondergeschikt Cel Cel
Succes Cel Cel
Gevaar Cel Cel
Waarschuwing Cel Cel
Info Cel Cel
Licht Cel Cel
Donker Cel Cel 
<!-- 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>
Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.

Tabellen met accenten

Gestreepte rijen

Gebruik .table-stripedom zebra-striping toe te voegen aan elke tabelrij binnen het <tbody>.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-striped">
  ...
</table>

Gestreepte kolommen

Gebruik .table-striped-columnsom zebrastrepen toe te voegen aan een tabelkolom.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-striped-columns">
  ...
</table>

Deze klassen kunnen ook worden toegevoegd aan tafelvarianten:

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-success table-striped">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

Zweefbare rijen

Toevoegen .table-hoverom een ​​hover-status in te schakelen op tabelrijen binnen een <tbody>.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-hover">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Deze zwevende rijen zijn ook te combineren met de gestreepte rijen variant:

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Actieve tabellen

Markeer een tabelrij of cel door een .table-activeklasse toe te voegen.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<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>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<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 accenttabellen?

Voor de tabellen met accenten ( gestreepte rijen , gestreepte kolommen , zwevende rijen en actieve tabellen ) hebben we enkele 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 --bs-table-bgaangepaste eigenschap. Alle tabelvarianten stellen vervolgens die aangepaste eigenschap in om de tabelcellen in te kleuren. Zo komen we niet in de problemen als semi-transparante kleuren worden gebruikt als tafelachtergronden.
  • Vervolgens voegen we een schaduw van een inzetvak toe aan de tabelcellen met box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);een laag bovenop een opgegeven background-color. Doordat we een enorme spreiding gebruiken en geen vervaging, zal de kleur eentonig zijn. Omdat --bs-table-accent-bgstandaard niet is ingesteld, hebben we geen standaardboxschaduw.
  • Wanneer een van de klassen .table-striped, .table-striped-columns, .table-hoverof wordt toegevoegd, wordt de kleur ingesteld op een semitransparante kleur om de achtergrond te kleuren..table-active--bs-table-accent-bg
  • Voor elke tafelvariant genereren we --bs-table-accent-bgafhankelijk van die kleur een kleur met het hoogste contrast. De accentkleur voor .table-primaryis bijvoorbeeld donkerder terwijl .table-darkdeze een lichtere accentkleur heeft.
  • Tekst- en randkleuren worden op dezelfde manier gegenereerd en hun kleuren worden standaard overgenomen.

Achter de schermen ziet het er zo uit:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Tafelranden

Begrensde tabellen

Voeg toe .table-borderedvoor randen aan alle kanten van de tabel en cellen.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-bordered">
  ...
</table>

Hulpprogramma's voor randkleur kunnen worden toegevoegd om kleuren te wijzigen:

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tafels zonder randen

Voeg toe .table-borderlessvoor een tafel zonder randen.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-borderless">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Kleine tafels

Voeg .table-smtoe om .tablenog compacter te maken door alle cellen doormidden te snijden padding.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-sm">
  ...
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Tafelgroepverdelers

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

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter
html 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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>zijn altijd verticaal uitgelijnd met de onderkant. Tabelcellen in nemen <tbody>hun uitlijning over van <table>en worden standaard bovenaan uitgelijnd. Gebruik de klassen voor verticaal uitlijnen om waar nodig opnieuw uit te lijnen.

Koptekst 1 Kop 2 Kop 3 Rubriek 4
Deze cel erft vertical-align: middle;van de tabel Deze cel erft vertical-align: middle;van de tabel Deze cel erft vertical-align: middle;van de tabel Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen.
Deze cel erft vertical-align: bottom;van de tabelrij Deze cel erft vertical-align: bottom;van de tabelrij Deze cel erft vertical-align: bottom;van de tabelrij Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen.
Deze cel erft vertical-align: middle;van de tabel Deze cel erft vertical-align: middle;van de tabel Deze cel is uitgelijnd met de bovenkant. Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen. 
<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">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nesten

Randstijlen, actieve stijlen en tabelvarianten worden niet overgenomen door geneste tabellen.

# Eerst Laatst Handvat
1 Markering Otto @mdo
kop kop kop
EEN Eerst Laatst
B Eerst Laatst
C Eerst Laatst
3 Larry de vogel @twitter 
<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 stijlen naar geneste tabellen lekken, gebruiken we de child combinator ( >) selector in onze CSS. tdOmdat we alle s en ths in de thead, tbody, en moeten targeten tfoot, zou onze selector er vrij lang uitzien zonder. Als zodanig gebruiken we de nogal vreemd uitziende .table > :not(caption) > * > *selector om alle tds en ths van de .table, maar geen van alle potentieel geneste tabellen te targeten.

Houd er rekening mee dat als u <tr>s toevoegt als directe onderliggende elementen van een tabel, deze standaard <tr>worden ingepakt in een <tbody>, waardoor onze selectors werken zoals bedoeld.

Anatomie

Tafelhoofd

Gebruik, net als bij tabellen en donkere tabellen, de modificatieklassen .table-lightof .table-darkom <thead>s licht- of donkergrijs te laten lijken.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tafelvoet

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter
voettekst voettekst voettekst voettekst 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Bijschriften

A <caption>functioneert als een kop voor een tabel. Het helpt gebruikers met schermlezers om een ​​tabel te vinden en te begrijpen waar het over gaat en om te beslissen of ze het willen lezen.

Lijst met gebruikers
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Je kunt het ook <caption>op tafel leggen met .caption-top.

Lijst met gebruikers
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter
html 
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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 kunnen tabellen gemakkelijk horizontaal worden gescrold. Maak elke tabel responsief in alle viewports door een in te pakken .tablemet .table-responsive. Of kies een maximaal breekpunt waarmee u een responsieve tabel wilt hebben door te gebruiken .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Verticaal knippen/afknotten

Responsieve tabellen maken gebruik van overflow-y: hidden, dat alle inhoud afsnijdt die verder gaat dan de onder- of bovenrand van de tabel. Dit kan met name vervolgkeuzemenu's en andere widgets van derden afsnijden.

Altijd responsief

Gebruik over elk breekpunt .table-responsivevoor horizontaal scrollende tabellen.

# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel Cel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breekpunt specifiek

Gebruik .table-responsive{-sm|-md|-lg|-xl|-xxl}indien nodig om responsieve tabellen te maken tot aan een bepaald breekpunt. Vanaf dat breekpunt zal de tabel zich normaal gedragen en niet horizontaal scrollen.

Deze tabellen kunnen worden weergegeven als gebroken totdat hun responsieve stijlen van toepassing zijn op specifieke viewport-breedten.

# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel Cel Cel Cel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<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

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Lus

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Aanpassen

  • De factorvariabelen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) worden gebruikt om het contrast in tabelvarianten te bepalen.
  • Naast de light & dark tafelvarianten worden themakleuren verlicht door de $table-bg-scalevariabele.