Source

Tafels

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

Voorbeelden

Vanwege het wijdverbreide gebruik van tabellen in widgets van derden, zoals kalenders en datumkiezers, hebben we onze tabellen ontworpen als opt-in . Voeg gewoon de basisklasse toe .tableaan een willekeurige <table>, en breid vervolgens uit met aangepaste stijlen of onze verschillende meegeleverde modificatieklassen.

Met behulp van de meest elementaire tabelopmaak ziet u hier hoe .table-gebaseerde tabellen eruitzien in Bootstrap. Alle tabelstijlen worden overgenomen in Bootstrap 4 , wat betekent dat alle geneste tabellen op dezelfde manier worden opgemaakt als de bovenliggende tabellen.

# 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Je kunt de kleuren ook omkeren - met lichte tekst op donkere achtergronden - met .table-dark.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-dark">
  <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>

Opties voor tafelkoppen

Gebruik, net als bij tabellen en donkere tabellen, de modificatieklassen .thead-lightof .thead-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
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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">
  <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>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-striped table-dark">
  <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>

Begrensde tafel

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">
  <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>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-bordered table-dark">
  <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>

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">
  <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>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-hover table-dark">
  <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>

Kleine tafel

Voeg .table-smtoe om tabellen compacter te maken door de celopvulling in tweeën te snijden.

# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-sm">
  <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>
# Eerst Laatst Handvat
1 Markering Otto @mdo
2 Jakob Thornton @dik
3 Larry de vogel @twitter 
<table class="table table-sm table-dark">
  <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>

Contextuele lessen

Gebruik contextuele klassen om tabelrijen of afzonderlijke cellen te kleuren.

Klas rubriek rubriek
Actief Cel Cel
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Normale tafelachtergrondvarianten zijn niet beschikbaar met de donkere tafel, maar u kunt tekst- of achtergrondhulpprogramma's gebruiken om vergelijkbare stijlen te bereiken.

# rubriek rubriek
1 Cel Cel
2 Cel Cel
3 Cel Cel
4 Cel Cel
5 Cel Cel
6 Cel Cel
7 Cel Cel
8 Cel Cel
9 Cel Cel 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyklasse.

Maak responsieve tabellen door een willekeurige in te pakken .tablemet .table-responsive{-sm|-md|-lg|-xl}, waardoor de tabel horizontaal schuift bij elk max-widthbreekpunt van respectievelijk maximaal (maar niet inclusief) 576px, 768px, 992px en 1120px.

Houd er rekening mee dat aangezien browsers momenteel geen bereikcontextquery's ondersteunen , we de beperkingen van min-en max-voorvoegsels en viewports met fractionele breedten omzeilen (die onder bepaalde omstandigheden kunnen voorkomen op apparaten met een hoge dpi, bijvoorbeeld) door waarden met een hogere precisie te gebruiken voor deze vergelijkingen .

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">
  <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}.

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}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.

# rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel
# rubriek rubriek rubriek rubriek rubriek
1 Cel Cel Cel Cel Cel
2 Cel Cel Cel Cel Cel
3 Cel Cel Cel Cel Cel 
<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>